| |

Personalizar la página de error 404

ByLuis

Seguimos con el error 404. Si días atrás hablábamos de cómo personalizarlo desde WordPress, hoy hablaremos de cómo configurarlo de manera general desde el servidor.

Recordemos el 404. Cuando se intenta acceder a una página que no existe, el servidor devuelve un mensaje de error 404. Normalmente los navegadores tienen su propia página que muestra ese error (Firefox incluyó la suya a partir de la version 1.5). Personalizar nuestra propia página de error nos puede dar una mayor funcionalidad y no perder la estética de nuestro sitio.

Personalizar la página de error en Apache es algo sencillo que se puede realizar en un par de pasos:

  • Editamos el fichero httpd.conf

    (que se encuentra en el directorio [ruta hasta el diretorio de Apache]/conf) e incluimos la siguiente línea (si no existe):

    ErrorDocument 404 /[path]/[pagina404]

    Un ejemplo sería el siguiente:

    ErrorDocument 404 /error404.html

    También se puede crear un fichero con el nombre .htaccess, que contenga la línea anterior y subirla al directorio raíz.

  • Creamos una página web que muestre nuestro mensaje de error personalizado y lo situamos en la ruta indicada en la directiva ErrorDocument. En el ejemplo anterior sería crearnos el fichero error404.html y situarlo en el directorio raíz.

Dar más funcionalidad a nuestra página de error

Algo que se podría incluir sería avisar sobre el error que se ha producido accediendo a la página errónea y mostrar posibilidades de navegación para que el usuario siga visitando nuestras páginas, haciendo una llamada a nuestro buscador de contenidos y mostrando los resultados. Para ello obtenemos la última palabra de la url (que suele ser la que contiene más información) y la usamos en nuestro motor de búsqueda (también se podría hacer con todas las palabras de la url).

Vamos a mostrar un script PHP de ejemplo de nuestra página personalizada de error. Lo primero es crear la cabecera del documento HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!-- Se incluyen los estilos -->
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>

Seguimos con el cuerpo del HTML, intentando seguir el mismo diseño que el resto del sitio (nunca se debe perder nuestra identidad) y mostramos el mensaje de error:


<body>
<!-- Cabecera de la página, no debe ser simplemente texto -->
<p class="error">La página a la que ha accedido no existe:</p>
<?php
// La variable $_SERVER almacena
// entre otras cosas la URL solicitada
$pagina = $_SERVER['REQUEST_URI'];
?>
<p><?php echo $pagina; ?></p>

Y por último, obtenemos la última palabra de la URL y la usamos con nuestro motor de búsqueda.


<p>Páginas relacionadas:</p>
<?php
// Obtenemos la última palabra
// Si la URL acaba en "/" lo quitamos
if (strrpos($pagina, "/") == strlen($pagina) -1) {
$pagina = substr($pagina, 0, strlen($pagina)-2);
}
// Obtenemos la parte de la URL que va desde
// la última aparición de la barra "/"
// hasta el final
$ultimaPalabra = substr($pagina, strrpos($pagina, "/")+1);
// Eliminamos la extensión del script (.jsp, .php, ...)
$ultimaPalabra = substr($ultimaPalabra, 0, strrpos($ultimaPalabra, "."));
// Realizamos la llamada al proceso de búsqueda en nuestra web
// con lo obtenido en $ultimaPalabra
// Mostramos los resultados
?>
</body>
</html>

Debes tener cuidado con la primera línea (<?xml …), ya que si tienes activado los tags cortos en PHP va a darte error. Para desactivarlos tienes que modificar en el php.ini el siguiente valor:

short_open_tag = Off

Más información

Similar Posts

PHP 5.2.3 disponible

ByLuis

PHPHa salido a la luz la nueva versión de PHP, en esta ocasión se trata de la versión 5.2.3, siendo recomendable su instalación.
Esta nueva versión soluciona 6 cuestiones de seguridad, una de ellas es la función mysql_set_charset() la cual permite modificar la codificación de la conexión.
Además entre optimizaciones y correcciones de errores, hay más de 40 cambios más, destacando la mejora de las funciones md5() y sha1().
PHP 5.2.3 Release Announcement
Vía / iBlog – Ilia Alshanetsky

Acceder a WordPress en localhost desde tu red WIFI

ByLuis

Uno de los problemas a los que nos enfrentamos al desarrollar en responsive es que en local es difícil acceder a nuestro localhost desde móviles y tablets. Aunque con unos sencillos pasos podremos acceder sin problemas.

Primero tendremos que modificar nuestro vhosts de Apache para que acepte peticiones desde la red, añadiendo lo siguiente:

<VirtualHost [IP de nuestro ordenador en la red]>
    ServerAdmin [IP de nuestro ordenador en la red]
    DocumentRoot "[path a nuestro WP]"
    ServerName [IP de nuestro ordenador en la red]
    LogLevel debug
    ErrorLog "logs/wordpress-error.log"
    CustomLog "logs/wordpress-access.log" combined
</VirtualHost>

A continuación tenemos que modificar el wp-config.php para decirle el WP_SITEURL y el WP_HOME que variará si se accede desde nuestro ordenador o desde un móvil o tablet.

// Hay que ver si la IP desde la que accedemos es del rango de nuestra red que normalmente suele ser 192.168.1.x
if(preg_match('#^192\.168\.1\.\d+#', $_SERVER['HTTP_HOST'])) {
  define('WP_HOME', 'http://'.$_SERVER['HTTP_HOST'].'/');
  define('WP_SITEURL', 'http://'.$_SERVER['HTTP_HOST'].'/');
}

Y ya por último nos creamos un plugin que sustituirá toda referencia a la URL de local por la correspondiente que se encuentre en el contenido de los posts y que activaremos cuando trabajemos en local, o bien lo metemos en el functions.php, pero esto sería guarrear el código:

if(preg_match('#^192\.168\.1\.\d+#', $_SERVER['REMOTE_ADDR'])) {
  function replace_domain($buffer) {
    // modify buffer here, and then return the updated code
    return str_replace('http://localhost/', 'http://'.$_SERVER['HTTP_HOST'].'/', $buffer);
  }
  
  function buffer_start() { ob_start("replace_domain"); }
  
  function buffer_end() { ob_end_flush(); }
  
  add_action('wp', 'buffer_start');
  add_action('wp_footer', 'buffer_end');
}

Tienes el plugin disponible en mi repositorio de GitHub

PDT 1.0: PHP en Eclipse

ByLuis

eclipse.pngHace tiempo que hablamos de PDT, un conjunto de herramientas para el desarrollo de PHP, realizado por Zend para la plataforma Eclipse.

En esta ocasión ha salido por fin la versión 1.0, que añade las siguientes características:

  • Editores sensibles al contexto, que facilitan el resaltado de texto, asistente de código y code folding.
  • Integración con el proyecto modelo de Eclipse, quie permite usar las vistas de ficheros y proyectos, además añade un nuevo explorador para PHP.
  • Soporte para debug incremental del código PHP.
  • Framework y API que permiten el desarrollo de código de forma más sencilla.

PDT

Vía / International PHP Magazine

|

CMS Made Simple: crea páginas de forma sencilla

ByLuis

cmsmadesimple1.pngCMS Made Simple, como bien indica su nombre, es un CMS para PHP que nos permite crear un sitio web de forma rápida y sencilla, y poder gestionar igualmente sus contenidos. No es tan solo rápida la realización de páginas, sino el aprendizaje de la utilización de la aplicación, la gestión es muy intuitiva y además permite añadir nuevos módulos para ampliar las funcionalidades del sistema.
cmsmadesimple2.png
Entre las características generales nos encontramos con lo que normalmente tienen los CMS: url friendly, modular y extensible, ACL, contenido jerárquico, administración multi-idioma, accesibilidad WAI y WCGA, XHTML/CSS, plantillas Smarty y mucho más.
CMS Made Simple
Vía / Tripix

Gutenberg Snippet block

ByLuis

Últimamente estoy trabajando bastante con Gutenberg, tiene sus cosas buenas y malas. Sea como sea, es el futuro de WordPress, así que toca aprender.

Lo más interesante de todo es poder usar lo que sabía de webpack, React, HMR, … Y para practicar he hecho un plugin que permite añadir snippets de código en los posts usando los bloques de Gutenberg

Para ello uso la librería highlight.js que permite destacar código de forma sencilla. Aquí un ejemplo

//  Import CSS.
import './scss/style.scss';
import './scss/editor.scss';
import icon from './icon';
import edit from './edit';
import save from './save';
import attributes from './attributes';

import { __ } from '@wordpress/i18n'; // Import __() from wp.i18n

export const name = 'sentidoweb/snippet';

export const settings = {
	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
	title: __( 'Snippets editor', 'sw-snippet' ), // Block title.
	icon: icon,
	category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
	keywords: [
		__( 'code', 'sw-snippet' ),
		__( 'format', 'sw-snippet' ),
		__( 'snippet', 'sw-snippet' ),
	],

	attributes,
	edit,
	save,
};

Snippet Block en Github

Más consejos para mejorar la velocidad de tu web

ByLuis

Ya en otras ocasiones hemos hablado sobre cómo mejorar la velocidad de tu web, en esta ocasión os presentamos otra lista que han publicado en Ask Apache, algunas nuevas, otras ya conocidas y otras un tanto curiosas (como la recomendación de un hosting del que quizás algunos tienen una opinión diferente).

Para no repetir contenido, voy a comentar tan solo las nuevas o las que no hemos repetido demasiado:

  • Usa XHTML y no uses estilos en las propias etiquetas.
  • Usa subdominios separados para alojar las imágenes estáticas y los ficheros de caché. En este caso yo creo que no se trata de subdominios virtuales, porque estaríamos en las mismas, supongo que pretenden tener un propio servidor para este tipo de contenido, para no sobrecargar el mismo servidor web.
  • Usa direcciones IP estáticas para tu dominio web y subdominios.
  • Usa CDN (Content Delivery Network), una red de servidores conectados entre sí en Internet que envían el contenido al usuario de forma transparente, sobre todo contenidos multimedia que suelen pesar mucho más. Algo parecido sería usar balanceo de carga, técnica que también se usa en el CDN.
  • Evita el uso de ETags.
  • Crea Ajax que permita caché y que sea sencillo.
  • Yo añadiría separar en tres servidores: aplicaciones, web y base de datos.

Parecen buenos consejos, pero claro, en la mayoría de los casos no podremos llevarlas a cabo por falta de recursos, así que lo mejor es elegir un buen hosting para suplir la imposibilidad de tener un CDN o IPs estáticas u otras más.

Top methods for faster, speedier web sites