WordPress : Crear una plantilla web

Manual Web --> WordPress

Fecha Publicación: 28 de Agosto de 2022

Fecha Modificación: 20 de Diciembre de 2023

WordPress Codex en español , el manual en línea para WordPress

Jerarquia de Plantilla en WordPress

El esquema de la jerarquía de las plantillas se lee de izquierda a derecha

WordPress : Estructura y componentes dentro de un tema

Vea tambien : WordPress : Estructura y componentes dentro de un tema

Como funciona WordPress

Funcionamiento WordPress si estamos en la Portada:

→ Al cargar una web y mostramos la portada primero llama al archivo index.php

→ Pero si en Ajustes/Lectura hemos definido una pagina estatica entonces ya no mostrara index.php sino la pagina front-page.php , si la pagina front-page.php no existe mostrara el contenido del archivo page.php

Funcionamiento WordPress si estamos en una pagina Individual:

Si deseamos mostrar la pagina quienes-somos llamara a la plantilla page.php

http://www.miweb.com/quienes-somos/

→ Consulta este articulo si deseas Mostrar el nombre del archivo de la plantilla actual en WordPress

Preparando el entorno de nuestro proyecto

Para crear nuestra plantilla devemos primero crear la carpeta de nuestro proyecto en este caso creare la carpeta 'desarrollo-wordpress-plantilla-base.com'
Ahora vamos a crear nuestra base de datos lo creare con el nombre de 'desarrollo-wordpress-plantilla-base.com'
Ahora vamos a Descargar WordPress en español en el siguiente enlace https://es.wordpress.org/ , en la página oficial de WordPress presionar el boton 'Consigue WordPress' luego busca el boton 'Descargar WordPress' , una vez descargado lo descomprimimos en la carpeta de nuestro proyecto
Instalamos WordPress
Una vez instalado WordPress vamos a la carpeta de nuestro proyecto y dentro de la carpeta 'wp-content/themes' creamos la carpeta para nuestro tema que contendra todos los archivos para que funcione nuestra web , en este caso crear la carpeta 'mitema'.

Creamos el archivo index.php

Creamos el archivo style.css

/*
Theme Name: Mitema
Theme URI: http://www.urldemitema.com
Description: Mi primer tema de WP.
Author: Nombre del creador
Author URI: http://www.urldelautordeltema.com
Version: 1.0
*/

Creamos el archivo header.php

Dentro del archivo header.php agregamos en la etiqueta body la clase body_class() que nos servira para que wordpress añada en forma automatica las clases de las paginas donde nos encontremos.

Por ejemplo:

Si estamos en la pagina de Inicio la agregara la clase Home.
Si estamos en la pagina de Category le agragara la clase archive.
Si estamos en un articulo le agragara la clase single.
Si estamos en la pagina de le agragara la clase page.

<!-- dentro de header.php agregamos en la etiqueta body la clase body_class()-->
<body <?php body_class(); ?>>

Por ejemplo estamos en la categoria recetas nos gregado la clase archive ademas la clase category-5 donde 5 es su identificador(ID) de la categoria recetas.

→ Ver ma sobre WordPress : Plantilla header.php

Creamos el archivo footer.php

Creamos el archivo functions.php

Creamos el archivo functions.php en la raiz del sitio para definir todas la funciones globales que se usaran en el sitio web.

Activar el modulo de las imágenes destacadas

En el archivo functions.php agregamos el siguiente codigo:

/* habilitar las imagenes destacadas */
add_theme_support( 'post-thumbnails' );

//Explicación del codigo: 
//add_theme_support  → Añadimos soporte a este tema
//post-thumbnails  → A las imagenes destacadas

→ Vea WordPress : Activar el modulo de las imágenes destacadas

Definir tamaño de imagenes personalizados

En el archivo functions.php agregamos el siguiente codigo:

//Definir tamaño de imagenes personalizados
add_image_size( 'fastfood-featured-image', 2000, 1200, true );
add_image_size( 'fastfood-thumbnail-avatar', 100, 100, true );

/* 
Por defecto WordPress sube la imagen a tamaño original y genera además 3 miniaturas:

Thumbnail, de 150px x 150px (máximo)
Medium, de 300px x 300px (máximo)
Large, de 1024px x 1024px (máximo)
Full, imagen a tamaño original (tal y como se sube)

Puedes generar tu miniatura personalizada con la función add_image_size() ,
 añadiendo el codigo en nuestro archivo functions.php 
*/

→ Vea Definir tamaño de imagenes personalizados

Registrar Menús en una plantilla

En el archivo functions.php agregamos el siguiente codigo:

// This theme uses wp_nav_menu() in two locations.
register_nav_menus( array(
	'top'    => __( 'Top Menu', 'fastfood' ),
	'footer' => __( 'Footer Menu', 'fastfood' ),
) );

→ Para mas detalle ver el articulo WordPress : Registrar Menús en una plantilla

→ Consulte tambien Mostrar el menú en el Theme

Creamos el archivo page.php para mostrar las paginas creadas

Creamos el archivo page.php en la raiz del sitio para mostrar las paginas creadas.

Mas referencia en: https://unidadvirtual.com/wordpress-page-php-es-la-plantilla-para-mostrar-las-paginas-creadas

Crear pagina archive.php para mostrar listado de las categorias

author-php , category.php , archive-postype.php , taxonomy.php , date.php y tag.php estos 6 archivos se pueden agrupar en un solo archivo que es el archivo archive.php que sirve para mostrar el listado de articulos en base a una categoria.

Recuerda si no creamos archive.php no se mostraran las paginas de categorias y solo mostrara la pagina de inicio.

Jerarquia de archive.php en WordPress

→ Ver mas sobre archive.php

Crear pagina single.php muestra los articulos de las categorias

Jerarquia de single.php en WordPress

La plantilla single.php se usa cuando hace clic en el título de la publicación en la página de inicio del blog y se ve solo la publicación individual.

la plantilla single.php muestra el contenido de un publicacion estatica , muestra todas las publicaciones individuales.

→ Mas sobre La plantilla single.php

Cargar script y css al final de la pagina

// Load scripts
function load_mis_scripts() {
	// CSS
	wp_enqueue_style( 'google-fonts', 
          'https://fonts.googleapis.com/css?family=Roboto:400,500,700' );

     wp_enqueue_style( 'bootstrap', 
         'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css' );

   //get_stylesheet_uri() - Devuelve la URL de la hoja de estilo del tema actual. 
    wp_enqueue_style( 'mis-estilos', get_stylesheet_uri() );

    // JAVASCRIPT
    wp_deregister_script('jquery');

	wp_enqueue_script('jquery', 
       'https://code.jquery.com/jquery-3.2.1.slim.min.js', array(), '3.2.1');

	wp_enqueue_script('fontawesome', 
         'https://use.fontawesome.com/025d1f53df.js', array(), null);

    wp_enqueue_script( 'popper', 
          'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js', 
           array('jquery'), '1.12.3', true );

    wp_enqueue_script( 'bootstrap', 
           'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js', 
            array('jquery'), '4.0.0', true );

         wp_enqueue_script( 'mis-scripts', 
                get_template_directory_uri() . 
               '/js/general.js', array('jquery'), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'load_mis_scripts' );

Referencia : Actualizar Bootstrap en una plantilla WordPress - Diseño y Programación Web

Funcion wp_enqueue_script

La función wp_enqueue_script es la que carga los scripts en tu sitio de WordPress. Normalmente lo vas a usar en tu archivo functions.php.

Documentacion Oficial wp_enqueue_script

Sintaxis: wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Parámetros

$handle	( cadena ) (Obligatorio) Nombre del script. Debería ser único.
$src	( cadena ) (Opcional) URL completa del script o ruta del script relativa al directorio raíz de WordPress. (string) (opcional) URL del script. Ejemplo: "http://example.com/wp-includes/js/scriptaculous/scriptaculous.js". Este parámetro solo es necesario cuando WordPress no conoce, todavía, el script. Default: None
$deps	(array) (opcional) Array de manejadores de cualquier script del que tenga dependencias este script; scripts que deban ser cargados previamente. False si no hay dependencias. Este parámetro solo se necesita cuando WordPress no conoce ya el script. Default: array()
$ver	(string) (opcional) Cadena que especifica la versión del script, si tiene una. Por defecto; false. Este parámetro se usa para asegurarse de que se envía al cliente la versión correcta, independientemente de cachés, de esta forma podría incluirse si hay un número de versión disponible y tiene sentido para el script. Default: false
$in_footer	(boolean) (opcional) Normalmente los scripts se colocan en la sección `<head>`. Si este parámetro se pone en true, el script se colocará en al final del `<body>`. Para ello, el tema tiene que disponer del gancho wp_footer() en el sitio apropiado. Note que usted tiene que poner en la cola a su script para que se ejecute antes que `wp_head`, incluso si éste se situa en el pie de página. (Nuevo en WordPress 2.8) Default: false

Referencia : Los detalles de la secuencia de comandos Enqueue para temas y plugins de WordPress

Consultar tambien:

WordPress : Las funciones principales y más útiles

Las funciones principales y más útiles de WordPress

WordPress : Las clases principales y más útiles

Articulo : 988 - Veces Leidas

Compartir Articulo:

Volver indice Volver Atras

Tabla comparativa Hosting

Planes Alojamiento Web
Linux

Panel de Control cPanel

WordPress : Crear una plantilla web

Jerarquia de Plantilla en WordPress

WordPress : Estructura y componentes dentro de un tema

Como funciona WordPress

Funcionamiento WordPress si estamos en la Portada:

Funcionamiento WordPress si estamos en una pagina Individual:

Preparando el entorno de nuestro proyecto

Creamos el archivo index.php

Creamos el archivo style.css

Creamos el archivo header.php

Creamos el archivo footer.php

Creamos el archivo functions.php

Activar el modulo de las imágenes destacadas

Definir tamaño de imagenes personalizados

Registrar Menús en una plantilla

Creamos el archivo page.php para mostrar las paginas creadas

Crear pagina archive.php para mostrar listado de las categorias

Crear pagina single.php muestra los articulos de las categorias

Cargar script y css al final de la pagina

Funcion wp_enqueue_script

Consultar tambien:

WordPress : Las funciones principales y más útiles

WordPress : Las clases principales y más útiles

Tabla comparativa Hosting

Planes Alojamiento WebLinux

Panel de Control cPanel

Jerarquia de Plantilla en WordPress

WordPress : Estructura y componentes dentro de un tema

Como funciona WordPress

Funcionamiento WordPress si estamos en la Portada:

Funcionamiento WordPress si estamos en una pagina Individual:

Preparando el entorno de nuestro proyecto

Creamos el archivo index.php

Creamos el archivo style.css

Creamos el archivo header.php

Creamos el archivo footer.php

Creamos el archivo functions.php

Activar el modulo de las imágenes destacadas

Definir tamaño de imagenes personalizados

Registrar Menús en una plantilla

Creamos el archivo page.php para mostrar las paginas creadas

Crear pagina archive.php para mostrar listado de las categorias

Crear pagina single.php muestra los articulos de las categorias

Cargar script y css al final de la pagina

Funcion wp_enqueue_script

Consultar tambien:

WordPress : Las funciones principales y más útiles

WordPress : Las clases principales y más útiles

¡Apóyame suscribiéndote a mi canal!

Planes Alojamiento Web
Linux