Header Ads Widget

Ticker

6/recent/ticker-posts

Construyendo un tema de WordPress de una página con Bootstrap 4

 A lo largo de este tutorial, crearemos un tema de WordPress de una página con estilo Bootstrap 4. Primero, comenzaremos creando la estructura del directorio y los diferentes archivos requeridos o algunas plantillas opcionales, luego integraremos Bootstrap 4 usando el functions.phparchivo.

Qué aprenderás

En este tutorial aprenderás

  • sobre los requisitos básicos del desarrollo de temas de WordPress
  • cómo crear un tema de WordPress desde cero
  • cómo proporcionar metainformación sobre su tema a WP
  • cómo personalizar diferentes plantillas de temas de WP
  • cómo mostrar el bucle de WordPress
  • cómo usar etiquetas WP como get_header()get_footer()get_sidebar()para incluir los fragmentos de plantilla de encabezado, pie de página y barra lateral en cada plantilla
  • cómo usar la get_template_part()etiqueta WP para crear parciales de plantilla personalizados
  • cómo utilizar functions.phppara incluir elementos CSS y JavaScript. En nuestro caso Bootstrap 4 JS y archivos CSS.
  • cómo usar los ganchos de WP

Requisitos

En primer lugar, este tutorial tiene una serie de requisitos. Si va a crear un tema siguiendo los pasos, deberá tener una máquina de desarrollo con PHP, MySQL y WordPress instalados.

No voy a cubrir los procedimientos de instalación de estas herramientas ya que la web ya tiene toneladas de tutoriales para cubrir eso.

WordPress es un sistema de gestión de contenido PHP que utiliza MySQL para la base de datos que es lo que necesitará PHP y MySQL.

Una vez que haya instalado WordPress, diríjase a la carpeta de instalación de WordPress (normalmente dentro de una www/httpcarpeta) y luego navegue hasta wp-contentdonde encontrará un archivo themes.

Crea style.css e index.php

La themescarpeta es donde necesita colocar sus temas. Si usa el panel de administración para instalar temas, estos se cargan automáticamente en esta carpeta, por lo que si está en una máquina local, simplemente haga su trabajo dentro de esta carpeta directamente.

Ahora siga adelante y cree una carpeta con los dos primeros archivos style.cssindex.phpAmbos son requeridos por WordPress por lo que su tema no funcionará o no será reconocido si no proporciona al menos estos dos archivos.

Si usa una CLI de Bash, use los siguientes comandos para crear la carpeta y los archivos

mkdir bootstrap4-theme
cd bootstrap4-theme
touch style.css
touch index.php

A continuación, debe abrir el style.cssarchivo y agregar la meta información necesaria sobre su tema como un comentario CSS.

/*   
Theme Name: One Page Bootstrap 4 Theme
Theme URI: <THEME_URI>
Description: A One Page WP Theme.
Author: <AUTHOR_NAME>
Author URI: <AUTHOR_URI>
Version: 1.0
*/

Necesita reemplazar la información con la suya.

Asegúrese de eliminar cualquier espacio en blanco en la parte superior del style.cssarchivo.

No style.csses solo un archivo de metainformación, sino también el archivo CSS principal para su tema. Así que déjelo ahora y podrá volver cuando necesite agregar estilos CSS personalizados para su tema.

A continuación, debe agregar contenido a index.phpEsta es la plantilla que se muestra cuando el usuario visita su sitio web de WordPress.

Así que abre index.phpy pon el siguiente contenido

<?php get_header(); ?>
<?php get_template_part('templates/content','loop'); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
  • get_header()incluye el header.phparchivo de plantilla,
  • get_sidebar()incluye el sidebar.phparchivo de plantilla,
  • get_footer()incluye el footer.phparchivo de plantilla
  • get_template_part()incluye el contenido de otro archivo templates/content-loop.php.

¿Necesitamos usar estas etiquetas para incluir diferentes partes de la plantilla index.phpEn realidad, para este sencillo tema de una página, no los necesitamos, solo podemos incluir el contenido de estas plantillas directamente en el interior, index.phppero para aprender a organizar temas con varias páginas, debemos usar estas etiquetas.

Imagina que tienes muchas plantillas y has incrustado el encabezado en cada plantilla. Si desea cambiar algo en el encabezado, deberá revisar cada plantilla y actualizarla. Lo mismo ocurre con el pie de página, la barra lateral y cualquier otra plantilla que sea igual en varias plantillas.

get_header()get_sidebar()get_footer()incluyen plantillas predefinidas (es decir header.phpsidebar.phpfooter.php). Para otras plantillas personalizadas, puede usar get_template_part()con el nombre de archivo personalizado ( {slug}-{name}.php) como parámetro.

Crear plantillas parciales

Cree una templatescarpeta, luego cree una content-loop.phpque incluya el bucle de WordPress y agregue el siguiente contenido

<div>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php endwhile; else: ?>
<p>There no posts to show</p>
<?php endif; ?>
</div>

La lógica de bucle es un código PHP simple que cualquier desarrollador PHP puede entender. Este código comprueba de allí hay publicaciones creadas en la base de datos utilizando el have_posts()función (de lo contrario muestra No hay mensajes para mostrar mensaje) entra entonces en un tiempo de bucle. Dentro del bucle, se llaman muchas funciones como the_permalink()(para mostrar el enlace permanente de la publicación), the_title()(para mostrar el título) y the_content()(para mostrar el contenido de la publicación).

Puede leer más información sobre el bucle de WordPress en los documentos .

Luego crea header.phpcon el siguiente contenido

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

    <meta name="description" content="">
    <meta name="author" content="">

    <meta name="viewport" content="width=device-width">
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <a class="navbar-brand" href="#"><?php bloginfo('name'); ?></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
          </li>
        </ul>
      </div>
    </nav>

Esto simplemente mostrará una barra de navegación de Bootstrap con información dinámica gracias a estas etiquetas de WordPress:

  • bloginfo('name') esta etiqueta WP se utiliza para recuperar el nombre de su sitio web,
  • wp_title() es una etiqueta WP que se puede utilizar para recuperar el título de la página actual,
  • wp_head()es una etiqueta WP que una vez llamada activa la acción wp_head . WordPress utiliza esta acción para colocar enlaces y otros recursos en el <head>de su plantilla.

A continuación, debe crear footer.php(esta es la plantilla utilizada para mostrar el pie de página en su tema) y el siguiente contenido.

< ?php wp_footer(); ?>
</body>
</html>

Esta plantilla simplemente cierra las plantillas <body>y, <html>pero se puede personalizar para cualquier pie de página que necesite.

Una cosa requerida es que debe llamar a la wp_footer()etiqueta WP que es similar a, wp_header()pero para el pie de página, coloca los recursos en el pie de página.

A continuación, debe crear la sidebar.phpplantilla

<div id="primary" class="sidebar-nav">
    <?php do_action( 'before_sidebar' ); ?>
    <?php if ( ! dynamic_sidebar( 'sidebar-primary' ) ) : ?>
        <aside id="search" class="widget widget_search">
           <?php get_search_form(); ?>
        </aside>
        <aside id="archives" class"widget">
            <h1 class="widget-title"><?php _e( 'Archives', 'shape' ); ?></h1>
            <ul>
                <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
            </ul>
        </aside>
        <aside id="meta" class="widget">
            <h1 class="widget-title"><?php _e( 'Meta', 'shape' ); ?></h1>
            <ul>
                <?php wp_register(); ?>
                <li><?php wp_loginout(); ?></li>
                <?php wp_meta(); ?>
            </ul>
        </aside>
   <?php endif; ?>
</div>

Este código mostrará los widgets de búsqueda, archivo y meta.

Esta es una plantilla de barra lateral simple de los documentos para mostrar widgets WP predeterminados.

Lea sobre más opciones para personalizar la plantilla de la barra lateral de los documentos de WordPress .

Hemos personalizado muchas plantillas diferentes y más comunes. WordPress te permite personalizar todos los aspectos de tu tema.

Adición de archivos Bootstrap 4

Ahora debemos completar un paso más para agregar estilos de Bootstrap 4 al tema.

Hay muchos métodos que puede utilizar para incluir activos CSS y JavaScript en su tema. Usaremos la forma adecuada y recomendada, es decir, usando el functions.phparchivo especial .

Primero continúe y descargue los archivos Bootstrap 4 .

A continuación, cree dos carpetas jscssDentro jscrea una subcarpeta vendor.

Ahora descomprima los archivos Bootstrap 4 y luego cópielos bootstrap.min.cssadentro cssbootstrap.min.jsadentro js.

Bootstrap 4 depende de jQuery y Popper.js, por lo que deberá colocar esos archivos dentro de la js/vendorcarpeta.

Coge jQuery's slim y Popper.js , colócalos y luego colócalosjs/vendor .

Si los archivos están listos, digamos a WP que los incluya en el encabezado de su tema.

Continúe y cree un functions.phparchivo PHP en su carpeta de temas y luego agregue este código:

<?php

function enqueue_styles() {

    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'core', get_template_directory_uri() . '/style.css' );

}
add_action( 'wp_enqueue_scripts', 'enqueue_styles');
function themebs4_enqueue_scripts() {

    wp_enqueue_script( 'jqslim', get_template_directory_uri() . '/js/vendor/jquery-3.2.1.slim.min.js' );
    wp_enqueue_script( 'popper', get_template_directory_uri() . '/js/vendor/popper.min.js' );
    wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts');

Puede notar que también hemos incluido el style.cssarchivo principal .

wp_enqueue_style():

registra el estilo si se proporciona la fuente (NO sobrescribe) y lo pone en cola. Fuente

wp_enqueue_script():

Registra el script si se proporciona $ src (NO se sobrescribe) y lo pone en cola. Fuente

wp_enqueue_scripts:

wp enqueue scripts es el gancho adecuado para usar cuando se colocan elementos en cola que deben aparecer en el front-end. A pesar del nombre, se utiliza para poner en cola tanto scripts como estilos. Fuente

add_action():

Las acciones son los ganchos que el núcleo de WordPress lanza en puntos específicos durante la ejecución o cuando ocurren eventos específicos. Los complementos pueden especificar que una o más de sus funciones PHP se ejecuten en estos puntos, utilizando la API de acción. Fuente

Conclusión

En este tutorial, le mostré cómo puede crear fácilmente un tema de WordPress receptivo desde cero usando Bootstrap 4.

Publicar un comentario

0 Comentarios