Cómo crear un tema adaptable de WordPress basado en Bootstrap

Con tantos dispositivos con diferentes resoluciones, tamaños de pantalla y sistemas operativos, los sitios web y las aplicaciones receptivos se han convertido en un requisito esencial para la presencia en línea de una marca.

Más del 52% de todo el tráfico web proviene de dispositivos móviles y el número va en aumento. Los desarrolladores web, los especialistas en marketing y los diseñadores comprenden el enorme potencial que tiene el sitio web con capacidad de respuesta y se puede ver, navegar y navegar fácilmente en cualquier dispositivo, independientemente de la resolución y la relación de aspecto.

Los temas receptivos son un enfoque para el diseño web en el que los elementos de un sitio web se ajustan automáticamente según el tamaño de la pantalla y los navegadores para mejorar la legibilidad, la experiencia del usuario y el tiempo de carga. Los desarrolladores y diseñadores de temas están sacando provecho del concepto de sitios web receptivos. Muchas marcas también contratan cada vez más a WordPress Developer para que sus sitios web sean receptivos y compatibles con dispositivos móviles.

En noviembre de 2013, Matt Cutts, el jefe del equipo de spam web de Google, lanzó un video que explica que el diseño receptivo no lo afectará negativamente en las SERP. Además, Google también ha publicado sus pautas sobre sitios web optimizados para dispositivos móviles que contienen detalles sobre cómo Google trata los sitios web receptivos.

Con el auge de los teléfonos inteligentes y otros dispositivos similares, el uso de computadoras de escritorio y portátiles está en declive (lento). Esto significa que las personas están usando sus teléfonos inteligentes para buscar casi cualquier cosa: desde noticias hasta tiendas locales, desde consultas de vuelos hasta las últimas películas. Esta tendencia ascendente presenta una gran oportunidad comercial para la comunidad en línea.

WordPress y Web Responsive

WordPress es el CMS más popular que impulsa una parte significativa de Internet. Cuenta con el apoyo de una sólida comunidad de desarrolladores y diseñadores de código abierto. Con el auge del diseño web receptivo, muchos desarrolladores de temas de renombre cambiaron al diseño receptivo e introdujeron marcos fáciles de entender, como Redux Framework, Carrington Core y Bootstrap , que es ideal para crear un tema de WordPress receptivo desde cero.

¿Qué es Bootstrap?

Bootstrap es un marco de código abierto que se utiliza para el desarrollo web front-end compatible con dispositivos móviles. Esto significa que se puede utilizar para crear temas de WordPress receptivos a través de sus plantillas de diseño basadas en CSS y Java Script.

Bootstrap es un conjunto de herramientas que simplifica el proceso de desarrollo para aplicaciones web complejas. Es una creación del equipo de desarrollo de Twitter y se puso a disposición de la comunidad de código abierto. El marco se hizo popular debido a su estructura liviana, ya que está codificado en LessCSS.

Al agregar Bootstrap a su sitio web, puede llamar a sus clases para agregar elementos prediseñados como botones, cuadrículas, tablas, menú, etc. De manera similar, puede hacer que los elementos existentes sean receptivos, sin agregar consultas de medios complejas.

Crear un tema Bootstrap de WordPress

La creación de un tema de arranque de WordPress es en realidad un proceso de 8 pasos. La buena noticia es que es fácil crear un tema impulsado por Bootstrap.

Paso 1: Desempaquetar Bootstrap

1. En primer lugar, instale WordPress en su dominio.
2. Descarga y descomprime Bootstrap.
3. Una vez hecho esto, conéctese usando un cliente FTP como FileZilla.
4. Vaya a wp-content > temas .
5. Cree una nueva carpeta en la carpeta Temas y asígnele el nombre BootSTheme . Cargue el contenido de Bootstrap descomprimido en esta carpeta.
6. Casi todas las instalaciones de WordPress contienen los siguientes archivos:

• footer.php
• header.php
• index.php
• style.css

Ahora, cree cuatro archivos vacíos con los nombres anteriores en la carpeta BootSTheme .

Paso 2: configurar Bootstrap

En la carpeta BootSTheme, abra style.css y pegue el siguiente código.

 / *
Nombre del tema: MyTheme
URI del tema: https://cloudways.com
Descripción: Mytheme Built on bootstrap
Versión: 1.1
Autor: Ahsan Parwez
URI del autor: https://cloudways.com
* /

Estos son básicamente comentarios que proporcionan descripciones y detalles sobre el tema. Le recomiendo que cambie estos comentarios para reflejar los detalles de su tema.

Paso 3: copiar el código

Para este tutorial, no usaré todos los archivos CSS y JS proporcionados en el paquete Bootstrap. Para iniciar el proceso de desarrollo, copie el código en el archivo bootstrap.min.css y péguelo en el archivo style.css . En este punto, el archivo style.css debería verse así.

Nota: Puede obtener el código CSS minificado completo en el sitio web de Bootstrap.

Paso 4: configuración de la plantilla HTML

Necesito tener una plantilla HTML básica para trabajar. Para facilitar las cosas, utilizaré este tema HTML . Te recomiendo que descargues para continuar con el tutorial.

WordPress tiene funciones integradas get_header () y get_footer () que de forma predeterminada llaman a los archivos header.php y footer.php respectivamente.

Comience cortando el código HTML desde la parte superior hasta el primer div contenedor y péguelo en el archivo header.php . El archivo se vería así:

El archivo footer.php contendrá el resto del código:

En este punto, si carga el tema Bootstrap WordPress y lo activa, no verá nada porque el index.php no contiene nada.

Para cargar el encabezado y el pie de página, usaré la función incorporada de WordPress para llamar a estos elementos. Para ello, pegue el siguiente código en el index.php :

 <? php get_header (); ?>

<? php get_footer (); ?>

Ahora los elementos de encabezado y pie de página se cargarán en nuestro sitio web, pero obtendremos una página básica que no tiene ningún tipo de estilo.

Paso 5: Configurar el encabezado y el pie de página

En el archivo header.php , importaré la hoja de estilo Bootstrap usando la función de WordPress echo get_stylesheet_uri () (lea más la función en el Codex de WordPress ). Esto importará el style.css al sitio web y verá una barra de menú superior ahora.

También puede agregar style.css agregando el siguiente código en la parte superior del archivo header.php .

 <link rel = "stylesheet" type = "text / css" href = "<? php echo get_stylesheet_directory_uri (). '/style.css'?>"> 

Pero esto no es todo, las funciones de JavaScript en nuestra página seguirán sin funcionar y no veremos ningún menú desplegable. Para habilitar esto, vamos a importar nuestros archivos js importando directamente el archivo por URL en footer.php . Pegue el siguiente código antes de la etiqueta del cuerpo de cierre.

 <script src = "../ wp-content / themes / MyBSTheme / js / bootstrap.min.js"> </script>

WordPress es conocido por su personalización y complementos. Para decirle a WordPress dónde colocar los ganchos de los complementos, vamos a pegar <? Php wp_head (); ?> y <? php wp_footer (); ?> en los archivos header.php y footer.php . Además, para establecer títulos dinámicos del sitio web, usaremos wp_title (); función en el archivo header.php entre las etiquetas <title> .

 <título> <? php wp_title ('|', verdadero, 'correcto'); > </title>

El código anterior llamará al título de la publicación separado por '|' que el nombre del sitio. El booleano verdadero mostrará el título. Si lo establece en falso , simplemente devolverá el valor y no lo mostrará. 'right' define la ubicación del título de la publicación a la derecha del separador.

Paso 6: Visualización de las publicaciones destacadas

A continuación, llamaré a las publicaciones dinámicamente a la página de inicio (como se muestra en ) y las mostraré en la parte superior (similar a las publicaciones destacadas que vemos en muchos sitios con tecnología de WordPress).

Escribe el siguiente código en tu index.php :

 <? php

query_posts ('posts_per_page = 1');

while (have_posts ()): the_post (); ?>
<div>
<h2> <a href="<?php the_permalink(); ?> "> <? php the_title (); ?> </a> </h2>
<p> <? php the_excerpt (); ?> & lt; / p>
</div>

<? php end while; wp_reset_query (); ?>

Como se puede ver, estoy usando un bucle while y establecer el número de mensajes a uno mediante el uso de post_per_page. Esta línea solo mostrará la última publicación del blog en la parte superior de la página y, una vez que se cierra el ciclo, query_posts se restablece.

La clase jumbotron se define en el archivo bootstrap.min.css . Lo usaré para diseñar las publicaciones destacadas usando etiquetas <h2> y the_permalink (); función. El hipervínculo se crea en el título de la publicación y the_permalink (); La función enlaza con la URL de toda la publicación. Para mostrar un extracto de la publicación, he usado otra función incorporada de WordPress, the_excerpt () ;.

Paso 7: enumerar sus categorías

Ahora enumeraré las categorías a la izquierda de la página de inicio. Crearé varias instancias de un div con estilo con las clases Bootstrap y la función de WordPress wp_list_categories (); .

Pega el siguiente código en index.php :

 <div class = "panel panel-default panel-body">
<div>
<div>

<ul>
<? php wp_list_categories ('orderby = name & title_li ='); ?>
</ul>

</div>
</div>
</div>

Esto enumerará las categorías por nombre con un agradable efecto de desplazamiento.

Paso 8: mostrar las publicaciones y los autores más recientes

Finalmente, mostraremos las últimas publicaciones del blog en la página de inicio. Vamos a iniciar otra etiqueta div y bajo este div , usaremos una técnica de bucle while similar a la que usamos en la publicación destacada, pero no la vamos a limitar con query_posts (); .

 <div>

<? php while (have_posts ()): the_post (); ?>

<h3> <a href="<?php the_permalink(); ?> "> <? php the_title (); ?> </a> </h3>
<p> <? php the_excerpt (); ?> </p>
<p> publicado por <? php the_author (); ?>

<? php end while; wp_reset_query (); ?>

</div>

Funciones de WordPress the_author () ; y busque el nombre de usuario del autor de la publicación. Podemos usarlo para mostrar dinámicamente el nombre del autor con cada publicación.

Una vez que hayas completado todo con éxito, tendrás una página como la que ves en la imagen que se muestra arriba.

Agregar Bootstrap en un tema existente de WordPress

Si está utilizando un tema de WordPress que no responde, puede agregar Bootstrap para que sea compatible con dispositivos móviles. Puede utilizar WordPress y Bootstrap de dos formas diferentes.

Agregar Bootstrap usando una CDN

Puede comenzar a usar elementos Bootstrap simplemente agregando su CDN a su archivo header.php.

Nota: Este método puede causar problemas de compatibilidad, por lo tanto, asegúrese de realizar una copia de seguridad completa antes de agregar el siguiente código.

 <! - CSS más reciente compilado y minimizado ->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<! - JavaScript compilado y minimizado más reciente ->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"> </script>

Puede acceder al archivo header.php mediante FTP o mediante un complemento. El código anterior contiene las versiones minimizadas de archivos CSS y JS que ofrecen un mejor rendimiento.

Añadiendo Bootstrap dentro de functions.php

En este método, debe descargar la biblioteca Bootstrap. Cargue el archivo Bootstrap.min.css y el archivo Bootstrap-theme.min.css en la carpeta CSS de su tema y cargue el archivo Bootstrap.js en la carpeta del tema llamada "js" de su tema de WordPress.

Ahora, acceda a su archivo functions.php para poner en cola estos scripts.

Agrega el siguiente código dentro de tu archivo functions.php.

 function reg_scripts () {
    wp_enqueue_style ('estilo de arranque', get_template_directory_uri (). '/css/bootstrap.min.css');
    wp_enqueue_style ('bootstrapthemestyle', get_template_directory_uri (). '/css/bootstrap-theme.min.css');
    wp_enqueue_script ('script de arranque', get_template_directory_uri (). '/js/bootstrap.min.js', array (), verdadero);
}
add_action ('wp_enqueue_scripts', 'reg_scripts');

También puede omitir la parte de carga y poner en cola directamente el CDN de arranque como tal.

 function my_scripts_enqueue () {
    wp_register_script ('bootstrap-js', ': //maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array ('jquery'), NULL, verdadero);
    wp_register_style ('bootstrap-css', ': //maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', falso, NULL, 'todos');

    wp_enqueue_script ('bootstrap-js');
    wp_enqueue_style ('bootstrap-css');
}
add_action ('wp_enqueue_scripts', 'my_scripts_enqueue');

Guarde el archivo y cárguelo de nuevo en el servidor.

¿Que sigue?

Este tutorial se centra principalmente en crear un tema básico de WordPress a partir de una plantilla HTML y hacerlo receptivo mediante Bootstrap 3.x. En publicaciones futuras, crearé más páginas como single.php, front-page.php y functions.php. También explicaré cómo importar hojas de estilo y JavaScripts desde el archivo functions.php.

En caso de que necesite ayuda, simplemente publique un comentario a continuación y me pondré en contacto con usted.