Monthly Archives: febrero 2017

Cómo usar variables en CSS con PHP – iframe responsive

By | 14 febrero, 2017

Variables en CSS con PHP - iframe responsive - Usar variables en CSS no es posible de forma directa, por ejemplo, para adaptar un iframe responsive, pero sí es posible generar archivos con encabezados CSS usando código en PHP, lo que nos permite usar variables de PHP para hacer cambios en el CSS cada vez que se recarga la página. Esto último es importante, ya que, si la página no se regenera, no habrá ningún cambio en el CSS, por lo que, en estos casos hay que usar JavaScript, con los problemas de seguridad y de incompatibilidades con otros scripts que ello conlleva.

PHP contra JavaScript

Mientras que PHP se ejecuta en el servidor, es decir, hay que regenerar la página y volver a cargar el html para ver los cambios generados, JavaScript permite hacer cambios visuales, por ejemplo, de forma inmediata e interactiva con el usuario sin los problemas que la recarga de las páginas generan: tráfico en el servidor, pérdida de tiempo, frustración del usuario, etc.

Sin embargo, hay casos en los que modificar determinadas propiedades de ciertas reglas del CSS antes de enviar el html es mucho más práctico y seguro que usar JavaScript, descargando de esta manera la propia carga de la página al reducir los scripts. Por ejemplo, si tenemos un iframe en el que unas veces añadimos un vídeo de un determinado tamaño y otro distinto otras más, y queremos que sea un iframe responsive, debemos crear varias reglas diferentes y activarlas según el tamaño, al añadir el vídeo. Para esto es necesario determinar una regla de tres entre el «width» y el «height» del vídeo, por lo que el resultado será diferente dependiendo de los mencionados tamaños.

iFrame responsive «adaptable»

Para el iframe responsive, tan solo hay que crear un «DIV», en el que encerrar el iframe, y darle un nombre de clase para que se ejecute su regla CSS, con los valores indicados, teniendo la precaución de sustituir el valor de «padding-bottom» por el resultado de calcular la relación entre el «width» y el «height» del vídeo; que es la siguiente: variables en CSS - iframe responsive - regla de tres vídeoAñadiendo cualquier iframe en un DIV con las mencionadas reglas, tendremos un iframe responsive, cuyo tamaño se adecuará al de la página del usuario cuando este la cambie a su gusto, ya sea redimensionándola o porque esta se muestra en un dispositivo móvil o tablet.

Observaciones:

Esto es así para imágenes o vídeos, pero no es probable que funcione como esperamos si dentro del iframe lo que se muestra es una página externa, un html con sus propias reglas, etc.


Usar variables en CSS con PHP

Como ya he mencionado, no es posible usar variables en CSS, por lo que hay que hacer encaje de bolillos para poder hacerlo, pero no es tan complicado como pueda parecer, porque solo hay que crear un archivo con la extensión «.php», con una cabecera CSS y llamarlo al cargar la página.

variables en CSS - iframe responsive - icono CSS3Este archivo podrá contener el código PHP que consideremos oportuno, para obtener los valores deseados a insertar en las reglas CSS, pero no devolverá html, sino que su salida será un archivo CSS perfectamente formado…

Para ver la salida simple de este CSS con Firebug, en Wamp o similar, he creado una carpeta de prueba que contiene un index.php con la siguiente llamada:

y el archivo CSS en PHP pruebas.php, que incluye el código de más arriba. Obteniendo como salida una página en blanco, obviamente, pero con el CSS deseado…

variables en CSS - iframe responsive - Página vista con Firebug

Aclaraciones:

Para hacer este código verdaderamente funcional y que el uso de variables en CSS sea útil, es necesario dotarle de más líneas PHP que obtengan los datos deseados de forma automática: «width» y «height», en este caso, u otras que necesitemos; además, si tenemos más de un iframe y estos contienen vídeos o imágenes con diferentes tamaños tendremos que crear reglas específicas con «Id» y no con «Class», para poder identificarlos debidamente, porque, sino, todos obtendrían el mismo valor «padding-bottom» de la última regla leída por el explorador web…

Id:identifica a un objeto por su nombre.#regla{
Class:identifica a todos los objetos de la misma clase..regla{

Esto lleva trabajo y pruebas, cada cual ha de adecuar el código a sus necesidades, pero, una vez conseguido el objetivo, funcionará correctamente y no tendremos que preocuparnos más de ello.

Publicidad

variables en CSS - iframe responsive - Aviso publicidad

Páginas de entradas adicionales en WordPress

By | 8 febrero, 2017

Páginas de entradas adicionales en WordPressEn algunas ocasiones, necesitamos añadir páginas de entradas adicionales en WordPress, porque cuando creamos nuestro blog tenemos una página principal, en la que aparecen todos nuestros artículos sin excepción en orden cronológico descendente, y, además, en su caso, otras páginas estáticas en las que solo aparece un artículo, un formulario de contacto, u otra cosa…

Páginas de entradas adicionales en WordPress

Cuando creamos una de estas páginas nos encontramos con que nada podemos hacer para que, por ejemplo, aparezcan en ella los artículos de nuestro blog asignados a la categoría «personal», «política», «cocina», etc. que podemos tener…

Cambiando un par de configuraciones, podemos hacer precisamente esto último, es decir:

crear páginas de entradas adicionales en WordPress y hacer que en ellas aparezcan determinados artículos y no otros. Además, podemos usarlas para sustituir la página principal de nuestro blog.

El primer paso es crear una nueva categoría en nuestro blog por cada página que queramos añadir a éste. Estas categorías las asignaremos, además de las que ya tengan, a los diferentes artículos que deseemos poner en cada página, por ejemplo:

Páginas de entradas adicionales en WordPress - WordPress - Página de cocina - Esquema

El segundo paso es crear las páginas asignándolas el nombre deseado, por ejemplo: Página de Política y Página de Cocina. En las páginas no hay que hacer nada más porque cualquier cambio que hagamos en ellas no aparecerá realmente al final del proceso. Sí podemos agregar los datos referentes al SEO si lo deseamos, pero, como he dicho, nada en el contenido…

Páginas de entradas adicionales en WordPress - WordPress - Página de cocina - Enlace corto

Lo siguiente es acceder a nuestra página de administración de WordPress y añadir la página al menú deseado si hay más de uno, sino al único disponible, cambiando su posición arriba o abajo para que aparezca en la barra de menús más a la derecha o a la izquierda, según queramos.

Páginas de entradas adicionales en WordPress - WordPress - Página de cocina - Menú

Aclaración:

El mismo resultado se puede conseguir añadiendo una categoría determinada al menú del blog, ya que al pulsar sobre él aparecerá una página con los artículos marcados con esa determinada categoría; pero con una gran diferencia en el fondo: las páginas se pueden seleccionar para que una determinada de ellas sea mostrada como predeterminada al inicio del blog, cosa que no es posible con las categorías, etc., por lo que, por ejemplo, podemos hacer que sea nuestra página de cocina la que se muestre a los lectores y no una página con todos los artículos de nuestro blog.

Páginas de entradas adicionales en WordPress - WordPress - Página de cocina - Ajustes página inicial

Ni que decir tiene que si hacemos esto en este momento solo aparecerá una página vacía con el título que hayamos decidido; «Página de cocina», puesto que es una página limpia en la que no hemos añadido nada de provecho. De haber puesto una categoría o un enlace a ella en el menú serían sus artículos los que aparecerían…

Solo nos queda enlazar nuestra página con la categoría «Cocina» para que cuando se pulse sobre el enlace en el menú se abra una página con todos los artículos marcados con esa categoría.

Hay que ver que no es posible hacerlo aquí:

Páginas de entradas adicionales en WordPress - WordPress - Página de cocina - Enlace corto

porque donde pone «/pagina-de-cocina/» debería poner «/category/cocina/», pero si lo ponemos nosotros a través del botón «Editar» el código de WordPress lo formatea a: «/categorycocina/», sin la barra separadora central y nos dará como resultado una página de resultados vacía…
Por eso debemos acceder a nuestra base de datos a través de «phpMy admin» desde cPanel, buscar la página y cambiar el valor denominado «post_name» por: «category/cocina»

Wordpress - Página de cocina - Editar DB

Páginas de entradas adicionales en WordPress - WordPress - Página de cocina - Editar DB Category Name


Guardamos y listo…

Ahora cuando veamos nuestro blog comprobaremos que el menú «Página de cocina» apunta a: «lesidea.com/cajondesastre/category/cocina»

Páginas de entradas adicionales en WordPress - WordPress - Página de cocina - Página apunta a categoría cocina

que es lo que queríamos. Es importante al respecto mencionar que «category/cocina» es en mi caso, y supongo que en el de la mayoría, pero no todos los blog tienen la misma configuración, por lo que antes de cambiarlo hay que cerciorarse de cuál es el valor correcto del «slug» de las categorías en nuestro blog.

Como se puede apreciar en la foto, encima de los artículos de la página aparece una línea que reza: «CATEGORY ARCHIVES: COCINA» que no resulta muy visual que digamos. Para eliminarla solo hay que acceder a la plantilla correspondiente de nuestro «theme» de WordPress y quitarla…

Recomendación

En vez de hacer cambios en los archivos del tema, es mejor crear un child theme basado en nuestro tema favorito, hacer los cambios en los archivos del child, salvaguardando con ello los originales y las actualizaciones de estos, y realizar los cambios y añadidos que queramos en nuestro blog a través del child theme. Cómo usar Child Themes en WordPress – Cajón de sastre.


Páginas de entradas adicionales en WordPress - WordPress - Página de cocina - PHP Plantilla categoría

Páginas de entradas adicionales en WordPress - WordPress - Página de cocina - Editar PHP Category archives

Páginas de entradas adicionales en WordPress - WordPress - Página de cocina - Editar PHP Category archives 2

Aviso:

Importantísimo hacer copias de seguridad antes de cambiar nada.

Para editar la plantilla no se debe usar el editor de WordPress, sino que se debe editar una copia en modo local y luego subirla con FileZilla o similar.


Publicidad

Páginas de entradas adicionales en WordPress - Aviso publicidad

Palabras clave, cómo elegirlas – WordPress

By | 8 febrero, 2017

Palabras clave keywordsElegir las palabras clave adecuadas («keywords») para nuestro artículo, página de productos o página web en general; es el primer paso que hemos de dar para tener un buen posicionamiento SEO en los buscadores, y hacer feliz a Google, sobre todo…

Palabras clave

Hace tiempo, las palabras clave tenían que ser incluidas en el «html» por medio de etiquetas «meta» adecuadas, separándolas por medio de comas, y eso era todo:

Pero se produjeron tantos abusos: interminables listas de palabras, spam, etc., que el sistema quedó obsoleto y fue sustituido por otro directamente relacionado con el contenido de la página.

Las palabras clave son tomadas ahora de entre las contenidas en el título, los bloques de texto y los títulos: H1, H2, H3, etc.; dependiendo de su posición en estos, sobre todo del título principal.

Tampoco es necesario que sean palabras simples, sino que pueden ser frases, es más, es recomendable que sean frases, no muy complejas y con pocos nexos, pero descriptivas de lo que queremos expresar: como nosotros o cualquier otro usuario las escribiría en un buscador.

Por ejemplo, este artículo, precisamente, usa como «keywords» la frase: «palabras clave», que, como puede apreciarse, está incluida al comienzo del título principal del artículo, al comienzo del primer párrafo y en un H2, además de estar repartida varias veces a lo largo del texto.

Metodología para elegir las palabras clave

Lo más importante que hemos de tener en cuenta a la hora de elegir las palabras clave, es que el mensaje que estas envían ha de estar en el mismo contexto que el resto del texto de nuestra página. De ahí lo mencionado más arriba sobre su situación en los títulos, texto, etc. No debemos forzar la sintaxis para que las «keywords» conecten con el resto de lo escrito, sino que hemos de situarlas de forma que el lector las vea como un indicador del contenido de la exposición.

En general, las palabras clave han de estar incluidas en las siguientes partes de la página.

  1. Al principio del título principal de la página. Lo que se denomina el título SEO.
  2. Al principio del primer párrafo del texto.
  3. En algún título interno del texto, encabezado o sub encabezado, como un H2, por ejemplo.
  4. Dentro de la url de la página.
  5. En la etiqueta «Alt»: «Texto alternativo» de cada una de las imágenes.
  6. En la etiqueta «Meta descripción».

Palabras clave - Ojo binarioEs evidente que tenemos control sobre la parte subjetiva del proceso, sobre la que tenemos poder de decisión y que resulta ser la más importante, la de elegir las palabras clave, pero no tenemos manera de acceder a la meta descripción sin acceder al html, con algún plugin, en WordPress, por ejemplo, etc. Por esto, el uso de los plugin está recomendado para quienes se quieran centrar en los textos y recibir en tiempo real avisos e información necesaria para corregir los posibles errores cometidos respecto al SEO, mientras escriben. Hay muchos, y solo hay que hacer una búsqueda en la pestaña Plugins de WordPress para encontrarlos sin más problema. Yo, por mi parte, no estoy en condiciones de recomendar ninguno sin desmerecer a otros, así que no lo haré en este momento…

Publicidad

Palabras clave - Aviso publicidad

Hosting SSD Hostinet – Mejora tu web y tu SEO

By | 5 febrero, 2017

Hostinet - Hosting SSD - Servidores VPS 150Con el hosting SSD, Hostinet ha mejorado cualitativamente el posicionamiento SEO de todos los usuarios que tienen alojadas sus web en él, además de la velocidad de carga de las páginas. Y si a esto le sumamos una notable optimización de su servicio técnico, que también ha sido mejorado y que ahora resuelve los «tickets» de forma aún más profesional y rápida, he llegado a la conclusión de que:

Hostinet es el mejor hosting SSD de los que yo he probado, que son varios: gratuitos y de pago…

Este blog, Cajón de sastre, alojado en un hosting SSD3, ha mejorado su posicionamineto SEO en gran medida desde que lo trasladé de los discos viejos a los mencionados SSD, posibilitando, entre otras cosas, una subida más que interesante en los pagos de Adsense, de Google.

Hostinet - El mejor hosting SSD cupón


Webempresa - hosting SSDWebempresa, por ejemplo, tiene una excelente calidad, y un hosting SSD, pero su alto precio y poco espacio en disco lo hacen poco accesible para la mayoría de los usuarios…

Exportar e importar entradas en WordPress

By | 4 febrero, 2017

Exportar e importar entradas en wordpress - Importar y exportar entradasA veces, podemos querer exportar e importar entradas en WordPress, por diversos motivos, pero el más probable es que queramos subir a nuestro blog una entrada que hemos creado y probado en “Localhost” con Wamp, Xamp o similar.

Existen múltiples Plugin para llevar a cabo el proceso, con filtros para discriminar entradas, pero no siempre funcionan como esperamos…

Yo tengo instalado el “Importador de WordPres”, que me resulta útil y fácil de usar…

Exportar e importar entradas en wordpress - WordPress - Plugin - Importador de WordPress - Activar y desactivar

Puesto que el proceso básico para la exportación e importación de todas las entradas es el mismo que para una determinada entrada, voy a explicar una manera de hacer esto último, que lleva implícito el modo de hacerlo con todas las entradas del blog…

Exportar e importar entradas en WordPress

Exportar entradas individuales:

Exportar e importar entradas en wordpress - WordPress-Plugin-Menu-importar-exportarPara poder exportar una sola entrada, o ciertas entradas, las discriminaremos a través de las diferentes opciones disponibles: categorías, autores, etc., pero son demasiado genéricas, porque la mayoría de las entradas están incluidas en varias categorías o pertenecen al mismo autor…

Podemos solventar este pequeño escollo creando un autor “ficticio”, que solo usaremos para este menester. Yo uso uno llamado “Exportador de Entradas”, como se puede apreciar en la imagen, para lo que solo hay que recordar usarlo al crear la entrada a exportar, o bien sustituir el autor original de la entrada por el ficticio antes de exportarla.

Exportar e importar entradas en wordpress - WordPress - Plugin - Menu importar exportar - Exportar - Elegir que exportar

Advertencia:

Si usamos este truco para exportar entradas desde el blog que tenemos en la web, hemos de recordar que ese autor será el que aparezca en las entradas a las que está asignado, si están “Publicadas”, y será visualizado por nuestros lectores, por lo que, en este caso, es mejor usar otro filtro que nos parezca más oportuno, o bien cambiar el autor, exportar y volver a cambiarlo rápidamente…


Importar entradas individuales:

Exportar e importar entradas en wordpress - WordPress - Plugin - Menu importar exportar - Importar - Elegir importador

Para realizar el proceso inverso, es decir, importar las entradas antes exportadas, elegiremos el importador que más nos convenga, en este caso “WordPress”

Exportar e importar entradas en wordpress - WordPress - Plugin - Menu importar exportar - Importar - Examinar archivos

Buscaremos el archivo XML WordPress eXtended RSS (WXR) que nos interesa y seleccionaremos las opciones de importación adecuadas, que son, en este caso:

  • Asignar entradas a un usuario existente
  • Descarga e importa archivos adjuntos

Aviso:

A este respecto hay que tener en cuenta que la importación de imágenes, etc. no se realiza de hecho, sino que se enlazan con las originales en la web o en “Localhost”, según sea el caso; por lo que tendremos que añadirlas de forma manual y sustituir el enlace virtual por el correspondiente a esa o esas imágenes en nuestro servidor…


Exportar e importar entradas en wordpress - WordPress - Plugin - Menu importar exportar - Importar - Elegir usuario

Conclusión:

La tarea de exportar e importar entradas en WordPress de forma individual resulta algo más compleja que la correspondiente para todas las entradas sin filtrar, pero nos permite controlar el contenido de nuestro blog de prueba, por ejemplo, y tener en él solo la cantidad de entradas indispensable para nuestros fines, amén de la ya mencionada de crearlas en «Localhost» y subirlas más tarde al blog principal…

En cuanto al «Plugin» utilizado, puesto que su uso va a ser bastante puntual, puede ser desactivado a conveniencia, para así reducir la carga del blog…

Publicidad

Exportar e importar entradas en wordpress - Aviso publicidad

Cómo usar child themes en WordPress

By | 2 febrero, 2017

Child themes - WordPress child themesUsar child themes en WordPress – temas hijo o temas basados en otro tema – es la mejor manera de personalizar nuestro blog WordPress y asegurarnos en cierta medida de que las actualizaciones del tema padre no afectan a nuestras personalizaciones…

Es un proceso bastante simple y el resultado merece la pena.

Esto es posible porque los archivos que decidamos personalizar: css, content, header, functions, etc. estarán en otro directorio distinto del tema original, por lo que cuando recibamos una notificación de que existe alguna actualización, al actualizar el tema original no perderemos los cambios que hayamos hecho; aunque, eso sí, es conveniente echarle un vistazo a los archivos originales del tema padre que hayamos editado en el child para ver si se ha producido en ellos algún cambio y reproducirlo.

Supongamos que hemos editado el header (header.php) y añadido un icono, por ejemplo, si durante la actualización del tema el archivo “header.php” original no ha sufrido ninguna modificación, pues no tendremos que hacer nada, pero si la ha sufrido será interesante sumarla a nuestro “header.php” modificado para que esté actualizado también, aunque sin perder el icono añadido por nosotros…


El proceso básico para crear child themes es sencillo

1. Creamos un nuevo directorio dentro de la carpeta en la que se halle nuestro tema original y lo nombramos como más nos convenga.

Importante:

Siguiendo las convenciones de WordPress y Php: espacios, caracteres, etc.

Aunque lo recomendable es usar el mismo nombre del tema original y añadirle child o hijo, para que así nos sea más fácil localizarlo en el árbol de carpetas…

En mi caso:

2. Dentro de esta carpeta añadimos un archivo llamado:

style.css

que contendrá los añadidos que deseemos a través de la hoja de estilos, aunque puede estar vacío en cuanto a reglas, pero es absolutamente necesario para poder activar los child themes, porque ha de contener unas líneas de comentarios con los datos indispensables para que WordPress sepa de qué tema padre se trata y dónde encontrarlo

Como se puede apreciar en el código, hay dos líneas resaltadas, que son las únicas verdaderamente importantes:

Ver el detalle de que en Template debe ir el nombre de la carpeta en la que se halla instalado el tema original… /cajondesastre/wp-content/themes/iconic-one

Ésta es una línea que «No» es un comentario y le dice al código dónde se halla el archivo style.css original…

Opcional:

Estas líneas forman parte de la personalización y, en este caso, reemplazarán cualquier valor existente en el «style.css» original que coincida con la etiqueta «.entry-summary p»

Lo mismo, obviamente, para cada etiqueta sobre la que queramos hacer cambios de las ya existentes en el css o de las nuevas que queramos crear; simpre que las hayamos añadido en alguna parte del código, puesto que sino sería como no poner nada…

Activar el child theme en nuestro blog

Puesto que lo único necesario para usar nuestros child themes es lo expuesto anteriormente, solo tenemos que acceder a la pestaña «Apariencia» «Temas», seleccionar nuestro child theme y activarlo…

Así de fácil.

Pero hay algunos detalles a tener en cuenta:

  • Si queremos ver una imagen representativa de nuestro child al igual que pasa con el resto de temas que tenemos instalados, hemos de añadir a nuestro directorio la imagen deseada con el nombre «screenshot.png»; que puede ser la que más nos convenga, y su tamaño también, pero una 800 x 600 o relación 4:3 será una buena elección…
  • Si nos interesa editar alguno de los archivos del tema: content, header, etc. hemos de copiarlos en nuestra nueva carpeta ya editados o bien editarlos desde ella; para lo cual lo ideal es usar un buen gestor FTP como FileZilla o CiberDuck
  • El caso del archivo «functions.php» es algo diferente del resto, puesto que este archivo no reemplazará al original, pudiendo estar vacío sin más consecuencias, sino que será cargado antes que el original y las funciones que hayamos incluido en él serán tomadas como si de una más se tratara

A este respecto hay que decir que estos archivos editados, excepto «functions.php» como ya he dicho, reemplazarán, de forma virtual, a los originales, y los cambios que hagamos serán reproducidos en Firefox o iExplorer tal cual, lo hayamos hecho bien o hayamos cometido errores garrafales; y puede que esos errores hayan sido interceptados por el núcleo PHP y salga la página en blanco o que solo sean malos en cuanto a la presentación de nuestro blog…

Hay que hacer las comprobaciones necesarias después de cada cambio, por nimio que nos parezca…

¡Porque PHP no se casa con nadie!


Cómo detectar errores y corregirlos

Para poder ver los errores que hacen que se vea la página en blanco, por ejemplo, u otros, la mejor manera es usar la constante «WP_DEBUG» del archivo «wp-config.php» situado en la raíz de nuestro blog WordPress

Poner el valor «True» para hacer pruebas y «False» para usar el blog con normalidad…

 Esto hará que se muestren en pantalla dichos errores para que los podamos ver; pero, obviamente, también los verán el resto de usuarios del blog, por lo que solo hay que usarlo en momentos puntuales si nuestro blog está en la web, no importando, claro está, si usamos «Wamp» o similar en nuestro pc…

Sobre los subdirectorios en nuestros child themes

Podemos usar, si queremos, subdirectorios en nuestro child, al igual que en los temas originales, pero hay un problema difícil de solucionar sin entrar en detalles un tanto complicados:

El problema es que hay que usar la función «require_once()» para hacer la llamada al archivo php deseado, como en el ejemplo de arriba, y ahí reside el quid de la cuestión, porque aunque esta función detecta si el archivo ya ha sido cargado y, en ese caso, no lo carga de nuevo, resulta que hace la comparación con la ruta completa y no solo con el nombre del archivo.

O sea, que si pretendemos cargar el archivo «themonic-customizer.php» editado por nosotros para sustituir al original, que ya existe en el tema padre en la carpeta «inc», se producirá un error inevitable puesto que las rutas son casi iguales, pero diferentes en la parte del directorio original y del child…

Conclusión

Aunque crear y activar los child themes es de lo más sencillo, es importante «complicarse» un poco para hacer de ellos una herramienta verdaderamente útil para nuestros propósitos.

También es muy importante hacer pruebas e investigar en la web, ser metódicos y hacer copias de seguridad, al menos de los archivos que vayamos a editar…

Publicidad

Child themes - Aviso publicidad