Crear una plantilla personalizada con estilos CSS propios - YeaBit Informática

Crear una plantilla personalizada con estilos CSS propios

Método utilizado para crear una plantilla personalizada en wordpress, de forma que podamos darle estilos como si se tratara de una web independiente, pero estando dentro de wordpress.

He creado una carpeta llamada public en el directorio html_public, donde se guardaran algunos archivos de la web. Dentro he creado la carpeta css y la carpeta img. En la carpeta css he puesto el archivo bootstrap.min.css y el archivo style.css (se le puede dar el nombre que queramos). Dentro de la carpeta img las imágenes del proyecto.

Después he creado otra carpeta en el directorio public_html, que la he llamada partials donde he copiado los archivos; functions, header, footer del tema principal, no el tema hijo.

Además he creado un archivo llamado head.php, dentro he puesto links href a los estilos css y bootstrap. Para no tener problemas con los directorios le declaro la URL principal con base href, esto hace que al referirme a un directorio siempre se empieza desde public_html.

Tambien he usado las etiquetas meta charset utf-8 para indicar la codificación del texto y meta viewport para indicar el tamaño de pantalla de dispositivo.

Código del archivo head.php

Para crear la plantilla se crea un archivo en el tema activo en este caso el child theme se le da el nombre que se quiera .php.

Archivo plantilla personalizada WordPress

Luego dentro hay que escribir el nombre de la plantilla y decirle que incluya el archivo head.php:

¿php /* Template Name: Pricing */? (nombre de la plantilla que se vera en wordpress)

¿php include 'partials/head.php'? (le dice que incluya el archivo head.php)

Esto hace que cargue el archivo head.php cada vez que cargue la plantilla personalizada.

Ahora ya se puede comenzara a trabajar en la plantilla personalizada con estructura html, bootstrap y css propio (supongo que también en javascript) que no afecta a los demás estilos de wordpress, es independiente. Solo hay que escoger la plantilla desde wordpress cuando hagamos una nueva pagina.

Plantilla personalizada wordpress

Me encontré con el dilema de tener que añadir un formulario en la plantilla personalizada de wordpress. No funciona meter directamente el shortcode de contact form 7 así que buscando encontré una función en php que me soluciono el problema.

?php echo do_shortcode( ‘Aquí se pone el shortcode de contact form’ ); ? simplemente lo puse dentro de un div en el sitio donde me interesaba que apareciera y listo. Hice pruebas y el formulario funciona perfectamente y se puede editar como cualquier otro dentro de wordpress desde el menú contacto.

Para dar estilos al formulario simplemente use la clase que viene por defecto y lo añadí en la hoja de estilos propia de la plantilla.

El inconveniente de todo este método es que cada vez que queremos modificar algo no se puede hacer directamente desde el escritorio de wordpress, tenemos que modificar el archivo con un editor ya sea desde el mismo servidor o en local y re subiendo.

Además los cambios no se aplican guardando el archivo y actualizando el navegador, hasta que no se actualiza la pagina donde esta creado en wordpress no se verán los cambios.

Actualizar para aplicar los cambios

Otro punto negativo es que no podemos usar los cajones de meta descripción de yoast seo y hay que poner las meta desde el html a la antigua.. xD lo bueno es que heredamos el https de wordpress.

Dejo enlace a la landing page con pricing incluido para que veáis lo que se puede hacer desde wordpress tocando un poco de estructura y php.

Precio paginas web en Girona