Crea una plantilla de WordPress desde cero

A primera vista, crear una plantilla de WordPress puede parecer abrumador, pero una vez que lo sepas HTML, CSS y algo de PHPEres capaz Crea una plantilla de WordPress No hay problema.

Este CMS y Sistema de plantillas Esto te permite Desarrollo fácil y rápidoExcepto enorme Documentación en línea Encontrarás una solución en él.

En este tutorial, te mostraré cómo Crea un tema básico de WordPress desde cero Aquí puede ver publicaciones, páginas y bucles de inicio de sesión.

📑 Aquí podrás encontrar 👇

Lo básico: lo que necesita saber antes de comenzar a crear una plantilla de WordPress.
Herramientas: lo que necesitará para crear una plantilla de WordPress
Cómo crear una plantilla de WordPress desde cero
Título de la entrada
finalmente

Lo básico: lo que necesita saber antes de comenzar a crear una plantilla de WordPress.

Aunque esta guía es desde cero, te recomiendo que tengas un mínimo de conocimientos sobre cómo crearla. WordPress sobre aceite vegetal...

Archivo HTML

Lenguaje de marcado HTML es interpretado por el navegador: Ese El idioma principal del contenido que se muestra.

Es relativamente fácil de aprender y le permite crear su propio sitio web.

CSS

En español Hojas de estilo en cascada... Es un lenguaje que ofrece estilo y puede mejorar la apariencia de un sitio web.

Puede navegar por la documentación y obtener más información sobre HTML y CSS en el siguiente sitio web www.w3schools.com

PHP

Ese lenguaje de programación Diseñado para desarrollo web que le permite crear contenido dinámico.

WordPress se creó con PHP, pero no es necesario tener un conocimiento muy profundo de él. Crea una plantilla para WordPress...

Para crear un tema desde cero, No tienes que escribir tu propia función O algo complicado WordPress tiene todo lo que necesitas. Puedes verlos en su documentación oficial.

Por ejemplo, mostrar un título es tan fácil como escribir "the_title ()".

Ese Las características de WordPress son siempre descriptivas Puedes encontrar sus parámetros en el código.

WordPress

Cuando te vas Crea una plantilla de WordPressIdealmente, conocerá el CMS directamente. Entender como funciona Publicaciones, páginas, categoría, Etiquetas y su configuración.

Herramientas: lo que necesitará para crear una plantilla de WordPress

Estas herramientas te ayudarán a hacer las cosas más fáciles y rápidas:

WordPress

El CMS en el que implementas el tema. Puede descargar la última versión desde la siguiente URL Sitio oficial de WordPress en español...

Servidor local

Aunque es posible crear una plantilla desde cero WordPress administrado Prácticamente, Lo ideal es que instales Servidor local en su computadora Y empieza a trabajar desde ahí.

Ese Simplifique la edición de archivos Además de interactuar con el sitio web, puede usar XAMPP en Windows y MAMP en Mac.

Editor de código

El editor de código es como un automóvil: todos tienen sus cosas favoritas. Recomiendo Visual Studio Code, Gracias a sus grandes opciones de expansión y personalización. Además, es gratis.

código

Código de WordPress Documentación oficial para desarrolladores (Principalmente en inglés) muy útil para entender cómo funciona WordPress.

Uno de los enlaces más importantes que necesitará en su código es Jerarquía de plantillas:

Te dice claramente Plantillas requeridas para temas de WordPress (Algunos son opcionales).

Cómo crear una plantilla de WordPress desde cero

Para crear una plantilla en WordPress, debe comenzar con los archivos principales y expandir según sea necesario.

Si quieres estudiar este tutorial, necesitas descargarlo HTML de la planta de Cargador Usado como base Con Plantilla de mensaje...

Crea la base para tu tema de WordPress

Por el momento solo tienes un HTML puro, WordPress no es reconocido...

Para que WordPress reconozca la plantilla, Deben cumplirse ciertos requisitos. Debes tener estos documentos style.css e index.php...

Sistema de carpetas

Ese El archivo de tema debe estar en Carpeta de temas de WordPressNavega a la carpeta raíz donde está instalado WordPress. En mi caso, desde que instalé WordPress localmente, fue C: xampp htdocs wp-content topics...

Había una vez Crea una carpeta llamada "raiola". (Puede nombrar su tema como desee, pero en este tutorial el tema "Tema Leo"). Esta es la carpeta de temas Creará los mismos archivos en él.

En la carpeta Copie el contenido de la plantilla HTML de acuerdo a.

Archivo de estilo

WordPress analiza todas las carpetas en "wp-content / themes". Lee información del archivo style.css en cada archivo para determinar si se trata de un tema.

Si style.css existe, la carpeta es el asunto Buscará otros archivos de temas de WordPress. Por eso, es importante crearlo en primer lugar.

Dentro de Carpeta Raiola Has creado para un tema Crear archivo Style.css Y escribe el código con información sobre el tema:

</p> <p>/ * Nombre del tema: tema del tema de Raiola URI: https://raiolanetworks.es Descripción: tema de demostración para obtener instrucciones sobre cómo crear un tema de WordPress. Licencia: Licencia pública general GNU Versión 2 o superior URI de licencia: http: // www.gnu. Organización / Licencia / gpl-2.0.html * /

/ *

Nombre del sujeto: Raiola Subject

URI del tema: https://raiolanetworks.es

Descripción: Tema de demostración con tutorial para crear un tema de WordPress.

Licencia: Licencia pública general GNU v2 o superior.

URI de licencia: http://www.gnu.org/licenses/gpl-2.0.html

* /

Aunque WordPress solo identifica un tema por su nombre, le recomiendo que al menos use su URL para proporcionar el nombre, la URL, la descripción y los permisos.

Después de guardar los cambios, verá el menú "Apariencia> Tema" Se muestra el tema de WordPress. A primera vista parece dañado, pero no lo está:

Esto es normal y aún queda mucho por hacer. Ahora toda la parte Sistema de plantillas Php.

Index.php

documento index.php es el archivo de tema principal Él le mostrará cómo mostrar la casa junto con la entrada.

Para crearlo, usa Antes de eso, me referí al index.html de la plantilla base y creé un archivo PHP llamado index.php. Tienen el mismo contenido. Guardar en la carpeta de temas...

inmediatamente, WordPress reconoce esto como un temaasi que Puedes activar esoAhora tenemos que revivirlo.

Cuando lo activas Se ve mal, pero está bien... necesita especificar la ubicación del archivo CSS nuevamente, lo mostraré más adelante. Function.php...

Círculo de entrada

Ese un bucle es una solicitud que WordPress hace a la base de datos Encuentra noticias. Esto se hace en index.php:

</p> <p> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?><br /> </p> <p> </p> <p> Desafortunadamente no pudimos encontrar ninguna publicación.</p> <p><?php endif; ?>

si ( have_posts() ) : a pesar de que ( have_posts() ) : el cargo(); ?>

<!—— sé Demostrar Ese contenido de Email ——>

<!——

Sobre el voluntad Ese Archivo HTML con PHP de Ese Email de La familia

——>

Finalmente; Otro : ?>

<!—— con No es necesario sé obtener conㄚnorte Email, sé enviar la mercancía de vuelta Amable información: ——>

<fósforo>Ese pensar, No es necesario Tenemos Fundado conellaNS Email...</fósforo>

por si acaso; ?>

<!—— sé parada Ese anillo ——>

Para usar este bucle en la plantilla de WordPress que creó, vaya a la sección "ESCRIBIR UN BLOG" y copie y pegue el HTML que muestro a continuación en el bucle:

</p> <p> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?></p> <div class="card mb-4"><img decoding="async" loading="lazy" class="card-img-top" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Imagen máxima de la tarjeta" data-lazy-src="https://closermarketing.es/wp-content/uploads/2021/10/750x300.png"><noscript><img decoding="async" loading="lazy" class="card-img-top" src="https://closermarketing.es/wp-content/uploads/2021/10/750x300.png" alt="Imagen máxima de la tarjeta"></noscript></p> <div class="card-body"> <h2 class="card-title"><span id="titulo_de_la_entrada"> Título de la entrada</span></h2><div class="ads-asap ads-asap-aligncenter"><script type="rocketlazyloadscript" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4620552241976448" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4620552241976448" data-ad-slot="2554300206" data-ad-format="auto" data-full-width-responsive="true"></ins> <script type="rocketlazyloadscript"> (adsbygoogle = window.adsbygoogle || []).push({});</script></div> <p class="card-text">El dolor en sí mismo es amor que sigue rechazando algo, ¿no es así? Cuando uno de ellos fue liberado, surgió un problema. Podemos salvar nuestras palabras de la felicidad del cuerpo y la felicidad del alma. ¡Qué perdón!</p> <p> <a href="https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#" class="btn btn-primary" target="_blank" rel="noopener">Continuar leyendo →</a></div> <div class="card-footer text-muted"> Publicada el 1 de enero de 2017<a href="https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#" target="_blank" rel="noopener">Start Bootstrap ha sido lanzado</a></div> </div> <p><?php endwhile; else : ?></p> <p> Lo siento, no se encontraron costuras en ninguna publicación.</p> <p><?php endif; ?>

Cuarto

Sexto

Séptimo

ocho

nueve

diez

once

catorce

quince

dieciséis

Dieciocho

Veintidós

veintitrés

si ( have_posts() ) : a pesar de que ( have_posts() ) : el cargo(); ?>

<!—— sé Demostrar Ese contenido de Email ——>

<Hora 2 Excelente="Nombre de tarjeta">Email título</Hora 2>

<fósforo Excelente="Texto de la tarjeta">gratitud yo mismo esfuerzos sentarse disfrute, Fortalecer Iterativo cine... basura algunos con, no? Cual de diploma predecesor OMS Sin Fronteras, Amable mala suerte... Oralmente Sin trabas cuerpo Espiritualmente Vero disfrute felicidad Podemos, ya voy estupendo OMS!</fósforo>

<Amable href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#" Excelente="Btn btn-main">leer más Yenojado;</Amable>

</div>

Publicado por existe enero 1, 2017 noviembre ejecutar a través de

<Amable href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">Empezar Cargador</Amable>

</div>

<!——

Sobre el voluntad Ese Archivo HTML con PHP de Ese Email de La familia

——>

Finalmente; Otro : ?>

<!—— con No es necesario sé obtener conㄚnorte Email, sé enviar la mercancía de vuelta Amable información: ——>

<fósforo>Ese pensar, No es necesario Tenemos Fundado conellaNS Email...</fósforo>

por si acaso; ?>

<!—— sé parada Ese anillo ——>

Todavía no he visto ningún contenido específico porque el HTML no ha cambiado dentro del ciclo. Utilice las funciones de WordPress para especificar sus atributosEste bucle utiliza:

Calificación: Usas function_title (); para obtener el título de la base de datos.
breve introducción: Utiliza the_excerp () para mostrar la anotación del artículo;
Más detalles: Utiliza the_permalink () para crear un enlace a la publicación;
Fecha: Usas the_date () para agregar la fecha del artículo, pero te sugiero que uses otro método alternativo perfectamente válido "echo get_the_date ();"
autor: Use the_author () para mostrar el autor de la publicación;
Excelente foto: Buscar Excelente foto Utilice la función the_post_thumbnail ('Destacado'); donde "característica" es el tamaño que se definirá en la función del tema.

Reemplace su función con texto PHP y la publicación se generará automáticamente:

El código de bucle debería verse así:

</p> <p><?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?></p> <div class="card mb-4"><?php the_post_thumbnail(); ?></p> <div class="card-body"> <h2 class="card-title"><span id=""></span></h2><div class="ads-asap ads-asap-aligncenter"><script type="rocketlazyloadscript" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4620552241976448" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4620552241976448" data-ad-slot="2554300206" data-ad-format="auto" data-full-width-responsive="true"></ins> <script type="rocketlazyloadscript"> (adsbygoogle = window.adsbygoogle || []).push({});</script></div> <p class="card-text"><?php the_excerpt(); ?></p> <p> <a href="https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/<?php the_permalink(); ?>"class =" btn btn-primary">Continuar leyendo →</a></div> <div class="card-footer text-muted"><?php echo get_the_date(); ?> ——<?php the_author(); ?></div> </div> <p><?php endwhile; else : ?></p> <p> Desafortunadamente no pudimos encontrar ninguna publicación.</p> <p><?php endif; ?>

Cuarto

Sexto

Séptimo

ocho

nueve

diez

once

catorce

quince

dieciséis

Dieciocho

si ( have_posts() ) : a pesar de que ( have_posts() ) : el cargo(); ?>

the_post_thumbnail(); ?>

<Hora 2 Excelente="Nombre de tarjeta"> título(); ?></Hora 2>

<fósforo Excelente="Texto de la tarjeta"> extraer(); ?></fósforo>

<Amable href=" der_permalink(); ?>" Excelente="Btn btn-main">leer metroAmablesegundo Yenojado;</Amable>

</div>

eco Conseguir una cita(); ?> —— autor(); ?>

</div>

Finalmente; Otro : ?>

<fósforo>Ese pensar, No es necesario Tenemos Fundado con participaciónellaNS Email...</fósforo>

por si acaso; ?>

¡Comenzó a tomar forma!

Función de tema

Como comentamos en otros artículos, hay un lugar donde se pueden colocar todos los códigos de función: archivos Function.php...

Todo el mundo El código para crear una función específica está en este archivo. Para crear un tema de WordPress para este tutorial, use:

Tamaño de imagen personalizado
Soporte de encabezado
menú
Soporte de logo
Registro de la barra lateral
Registra un estilo
Registro de secuencia de comandos

Crea un archivo Functions.php en la carpeta del tema Y comencemos escribiendo el código necesario para realizar las funciones requeridas:

Tamaño de la pintura

WordPress estándar Hay 4 tamaños de imagen: Boceto, Pequeño, Mediano, Grande y Completo (Boceto, Pequeño, Mediano, Grande y Tamaño Completo) Este tema Se requiere una imagen de cierto tamaño:

Por lo tanto, tienes que Registrar tamaño de imagen Como consecuencia:

</p> <p>// Tamaño de imagen add_image_size ('Destacado', 750, 300, verdadero);

// tamaño de la imagen

Agregar tamaño de imagen( 'sobresaliente', 750, 300,verdadero );

Soporte de encabezado

Cuéntale a WordPress sobre tu tema No contiene metaetiquetas</b><span style="font-weight: 400;"> En el código y que </span><b>Puede generar</b><span style="font-weight: 400;">... En functions.php tienes que hacer lo siguiente:</span></p><p></p><div id="urvanov-syntax-highlighter-61642623eb141219067372" class="urvanov-syntax-highlighter-syntax crayon-theme-classic urvanov-syntax-highlighter-font-monaco urvanov-syntax-highlighter-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"><p><textarea wrap="soft" class="urvanov-syntax-highlighter-plain print-no" data-settings="dblclick" readonly="readonly" style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;"></p> <p>// etiqueta de título add_theme_support ('etiqueta de título');</textarea></p><div class="urvanov-syntax-highlighter-main" ><table class="crayon-table"><tr class="urvanov-syntax-highlighter-row"><td class="crayon-nums " data-settings="show"></td><td class="urvanov-syntax-highlighter-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><p><span class="crayon-c">// etiqueta de título </span></p><p><span class="crayon-e">add_theme_support</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'Etiqueta de título'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></p></div></td></tr></table></div></p></div><p></p><h4><em><b>Estilo de diseño</b></em></h4><p><span style="font-weight: 400;">WordPress necesita conocer los elementos que se van a cargar, incluidos los estilos, por lo que debe poner en cola las hojas de estilo CSS necesarias. </span><b>wp_enqueue_style</b><span style="font-weight: 400;">... coloque este código en functions.php:</span></p><p></p><div id="urvanov-syntax-highlighter-61642623eb142448424869" class="urvanov-syntax-highlighter-syntax crayon-theme-classic urvanov-syntax-highlighter-font-monaco urvanov-syntax-highlighter-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"><p><textarea wrap="soft" class="urvanov-syntax-highlighter-plain print-no" data-settings="dblclick" readonly="readonly" style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;"></p> <p> // Nombre del registrador: function raiola_enqueue_styles () {//Style.css wp_enqueue_style ('style', get_stylesheet_uri ()); // Manual del registrador wp_enqueue_style ('bootstrap', get_template_directory_uri (). Css / bootstrap.min.css ', false,' 1.1 ',' all ');} add_action (' wp_enqueue_scripts ',' raiola_enqueue_styles ');</textarea></p><div class="urvanov-syntax-highlighter-main" ><table class="crayon-table"><tr class="urvanov-syntax-highlighter-row"><td class="crayon-nums " data-settings="show"></td><td class="urvanov-syntax-highlighter-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><p><span class="crayon-h"> </span><span class="crayon-c">// estilo de registrador</span></p><p><span class="crayon-t">función</span><span class="crayon-h"> </span><span class="crayon-e">raiola_enqueue_styles</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></p><p><span class="crayon-h"> </span><span class="crayon-c">//Style.css</span></p><p><span class="crayon-h"> </span><span class="crayon-e">wp_enqueue_style</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'Estilo'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">get_stylesheet_uri</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></p><p><span class="crayon-h"> </span><span class="crayon-c">// cargador de registrador</span></p><p><span class="crayon-h"> </span><span class="crayon-e">wp_enqueue_style</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'Administración'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">get_template_directory_uri</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">...</span><span class="crayon-h"> </span><span class="crayon-s">'https://serv4.raiolanetworks.es/css/bootstrap.min.css'</span><span class="crayon-sy">,</span><span class="crayon-t">Incorrecto</span><span class="crayon-sy">,</span><span class="crayon-s">'1.1'</span><span class="crayon-sy">,</span><span class="crayon-s">'Todo el mundo'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></p></p><p><span class="crayon-sy">}</span></p><p><span class="crayon-e">Agregar acción</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'wp_enqueue_scripts'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'raiola_enqueue_styles'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></p></div></td></tr></table></div></p></div><p></p><blockquote><p><span style="font-weight: 400;">Si no sabe qué es un gancho, le recomiendo leer nuestro tutorial. </span><strong>¿Qué son los ganchos en WordPress y cómo se utilizan?</strong><span style="font-weight: 400;">...</span></p></blockquote><p><b>Script de registrador</b></p><p><span style="font-weight: 400;">Al igual que con los estilos, puede registrar los scripts requeridos en WordPress con el siguiente comando </span><b>wp_enqueue_scripts</b><span style="font-weight: 400;"> Como consecuencia:</span></p><p></p><div id="urvanov-syntax-highlighter-61642623eb143813889943" class="urvanov-syntax-highlighter-syntax crayon-theme-classic urvanov-syntax-highlighter-font-monaco urvanov-syntax-highlighter-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"><p><textarea wrap="soft" class="urvanov-syntax-highlighter-plain print-no" data-settings="dblclick" readonly="readonly" style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;"></p> <p>// Función de secuencia de comandos de registrador raiola_enqueue_scripts () {wp_enqueue_script ('bootstrap', get_template_directory_uri (). 'Https: //serv5.raiolanetworks.es/js/bootstrap.bundle.min.js', array ('jquery'));} add_action ('wp_enqueue_scripts', 'raiola_enqueue_scripts');</textarea></p><div class="urvanov-syntax-highlighter-main" ><table class="crayon-table"><tr class="urvanov-syntax-highlighter-row"><td class="crayon-nums " data-settings="show"></td><td class="urvanov-syntax-highlighter-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><p><span class="crayon-c">// registra el script</span></p><p><span class="crayon-t">función</span><span class="crayon-h"> </span><span class="crayon-e">raiola_enqueue_scripts</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></p><p><span class="crayon-h"> </span><span class="crayon-e">wp_enqueue_script</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'Administración'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">get_template_directory_uri</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">...</span><span class="crayon-h"> </span><span class="crayon-s">'https://serv5.raiolanetworks.es/js/bootstrap.bundle.min.js'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">Gran cantidad</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'jquery'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></p><p><span class="crayon-h"> </span><span class="crayon-sy">}</span></p><p><span class="crayon-h"> </span><span class="crayon-e">Agregar acción</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'wp_enqueue_scripts'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'raiola_enqueue_scripts'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></p></div></td></tr></table></div></p></div><p></p><p><span style="font-weight: 400;">Dado que ha registrado estilos y scripts, recuerde que </span><b>Eliminar enlaces a archivos estáticos</b><span style="font-weight: 400;">:</span></p><p></p><div id="urvanov-syntax-highlighter-61642623eb144179932290" class="urvanov-syntax-highlighter-syntax crayon-theme-classic urvanov-syntax-highlighter-font-monaco urvanov-syntax-highlighter-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"><p><textarea wrap="soft" class="urvanov-syntax-highlighter-plain print-no" data-settings="dblclick" readonly="readonly" style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;"></p> <p> <p> </textarea></p><div class="urvanov-syntax-highlighter-main" ><table class="crayon-table"><tr class="urvanov-syntax-highlighter-row"><td class="crayon-nums " data-settings="show"></td><td class="urvanov-syntax-highlighter-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><p><span class="crayon-o"><</span><span class="crayon-o">!</span><span class="crayon-o">——</span><span class="crayon-h"> </span><span class="crayon-e">Cargador </span><span class="crayon-e">nuclear </span><span class="crayon-v">CSS</span><span class="crayon-h"> </span><span class="crayon-o">——</span><span class="crayon-o">></span></p><p><span class="crayon-o"><</span><span class="crayon-e">pareja </span><span class="crayon-v">href</span><span class="crayon-o">=</span><span class="crayon-s">"Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/css/bootstrap.min.css"</span><span class="crayon-h"> </span><span class="crayon-v">relativamente</span><span class="crayon-o">=</span><span class="crayon-s">Hoja de estilo</span><span class="crayon-o">></span></p></p><p><span class="crayon-o"><</span><span class="crayon-o">!</span><span class="crayon-o">——</span><span class="crayon-h"> </span><span class="crayon-e">Personalizado </span><span class="crayon-e">estilo </span><span class="crayon-st">al</span><span class="crayon-h"> </span><span class="crayon-r">Ese</span><span class="crayon-h"> </span><span class="crayon-v">muestra</span><span class="crayon-h"> </span><span class="crayon-o">——</span><span class="crayon-o">></span></p><p><span class="crayon-o"><</span><span class="crayon-e">pareja </span><span class="crayon-v">href</span><span class="crayon-o">=</span><span class="crayon-s">"Stil.css"</span><span class="crayon-h"> </span><span class="crayon-v">relativamente</span><span class="crayon-o">=</span><span class="crayon-s">Hoja de estilo</span><span class="crayon-o">></span></p></div></td></tr></table></div></p></div><p></p><p><span style="font-weight: 400;">Esta es la forma correcta de cargar estilos y scripts en WordPress. Esta es una excelente manera de optimizar la web porque no carga y permite el mismo componente varias veces </span><i><span style="font-weight: 400;">Mini coche</span></i><span style="font-weight: 400;"> Y conectamos los archivos.</span></p></p><h3/><p><span style="font-weight: 400;">WordPress es posible </span><b>Elementos de grupo</b><span style="font-weight: 400;"> Estos se repitieron en Internet para evitar la duplicación del código y </span><b>Optimizar recursos</b><span style="font-weight: 400;">...</span></p><p><picture class="alignnone size-full wp-image-23809 aligncenter" title="Crea una plantilla WordPress desde cero [con archivos descargables] 7"><source type="image/webp" data-lazy- data-lazy-><img decoding="async" loading="lazy" alt="Elementos en una plantilla de WordPress" width="815" height="614" data-lazy- src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20815%20614'%3E%3C/svg%3E" data-lazy-src="https://closermarketing.es/wp-content/uploads/2021/10/elementos-en-plantilla-wordpress.jpg"/><noscript><img decoding="async" loading="lazy" alt="Elementos en una plantilla de WordPress" width="815" height="614" data-lazy- src="https://closermarketing.es/wp-content/uploads/2021/10/elementos-en-plantilla-wordpress.jpg"/></noscript><br/></source></picture></p><p><noscript><picture class="alignnone size-full wp-image-23809 aligncenter" title="Crea una plantilla WordPress desde cero [con archivos descargables] 7"><source type="image/webp" ><img decoding="async" loading="lazy" src="https://closermarketing.es/wp-content/uploads/2021/10/elementos-en-plantilla-wordpress.jpg" alt="Elementos en una plantilla de WordPress" width="815" height="614" /><br/></source></picture></noscript></p><p><span style="font-weight: 400;">Los elementos permanentes en toda la red suelen ser </span><b>Encabezado, pie de página y barra lateral</b><span style="font-weight: 400;">... WordPress permite la creación de </span><b>Por archivo</b><span style="font-weight: 400;">:</span></p><h4><strong><i>Archivo de cabeza</i></strong></h4><p><span style="font-weight: 400;">WordPress </span><b>Crea automáticamente títulos de menú y página</b><span style="font-weight: 400;"> Entonces, todo desde el menú de navegación puede estar contenido en un archivo PHP.</span></p><p><span style="font-weight: 400;">andar</span><b> Carpeta de temas</b><span style="font-weight: 400;"> (Como el archivo en el que creó el archivo anterior) y </span><b>Crear archivo header.php</b><span style="font-weight: 400;">... </span></p><p><span style="font-weight: 400;">Abra el archivo index.php y </span><b>pequeño</b><span style="font-weight: 400;"> Código HTML en la etiqueta<!DOCTYPE>Hasta el final</NAV>al</span><b> Péguelo en header.php</b><span style="font-weight: 400;"> Como les muestro a continuación:</span></p><p></p><div id="urvanov-syntax-highlighter-61642623eb145003663425" class="urvanov-syntax-highlighter-syntax crayon-theme-classic urvanov-syntax-highlighter-font-monaco urvanov-syntax-highlighter-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"><p><textarea wrap="soft" class="urvanov-syntax-highlighter-plain print-no" data-settings="dblclick" readonly="readonly" style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;"></p> <p><?php ?><!DOCTYPE html><html lang="es"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="description" content=""><meta name="author" content=""><title>Página de inicio del blog - Plantilla Bootstrap

Cargador

Página de inicio(Actual)

Ö

Servicio

tocar

1
2
3
Cuarto
5
Sexto
Séptimo
ocho
nueve
diez
once
12
13
catorce
quince
dieciséis
17
Dieciocho
19
20
21
Veintidós
veintitrés
24
25
26
27
28 años
29
treinta
31 años
32
33
34
35 años
36
37
38
39
40
41 años
42
43 años
44 años
45
46
47
48
49
50
?>
<!Tipo de documento html>
<html Largo="Ese">
<cabeza>
<yuan Conjunto de caracteres="UTF-8">
<yuan Apellido="Viewport" contenido="Ancho = ancho del dispositivo, proporción original = 1, reducción al tamaño = ninguno">
<yuan Apellido="describir" contenido="">
<yuan Apellido="Autor" contenido="">
<título>Blog La familia —— Empezar Cargador muestra</título>
<!—— Cargador nuclear CSS ——>
<pareja href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/css/bootstrap.min.css" relativamente=Hoja de estilo>
<!—— Personalizado estilo al Ese muestra ——>
<pareja href="Stil.css" relativamente=Hoja de estilo>
</cabeza>
<cuerpo>
<!—— navegación ——>
<no Excelente="navbar navbar-expand-lg navbar-dark bg-dark fix top">
<div Excelente="Envase">
<Amable Excelente="Marca de la barra de navegación" href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">Empezar Cargador</Amable>
<botón Excelente="Interruptor de la barra de navegación" Tipo de="Botón" datos——encimera="Colapso" datos——objetivo="#NavbarResponsive" aria——direccion="La barra de navegación reacciona" aria——Expandir="No está bien" aria——etiqueta="Navegación de palanca">
<Página de inicio Excelente="Icono para alternar la barra de navegación"></Página de inicio>
</botón>
<div Excelente="Doble la barra de navegación hacia abajo para minimizarla" ME GUSTARÍA="La barra de navegación reacciona">
<Ese Excelente="Navegador de la barra de navegación ml-auto">
<existe Excelente="Actividades del proyecto de navegación">
<Amable Excelente="Enlaces de navegación" href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">La familia
<Página de inicio Excelente="Solo Sr.">(Actual)</Página de inicio>
</Amable>
</existe>
<existe Excelente="Proyecto de navegación">
<Amable Excelente="Enlaces de navegación" href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">Ö</Amable>
</existe>
<existe Excelente="Proyecto de navegación">
<Amable Excelente="Enlaces de navegación" href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">Servicio</De su lindo>
</existe>
<existe Excelente="Proyecto de navegación">
<Amable Excelente="Enlaces de navegación" href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">tocar</Amable>
</existe>
</Ese>
</div>
</div>
</no>

El objetivo es agregar el encabezado, pie de página y barra lateral de otros documentos separar.

al Promover la gestión del estilo, Agregar a la etiqueta función body_class ().

Ahora en index.php Debes nombrar el archivo al principio del documento. el seguimiento:

Ya tienes un índice y un título Relacionado, pero En un archivo separado...

Aún debe realizar algunos cambios porque el encabezado no puede ser HTML puro porque hay Metadatos personales Por el lado:

</p> <p><meta name="description" content=""><meta name="author" content=""><title>Página de inicio del blog - Plantilla Bootstrap</title>

<título>Blog La familia —— Empezar Cargador muestra</título>

Quita esas líneas que Será reemplazado Función de WordPress con encabezado específico: wp_head ().

wp_head () responde Mostrar la mayoría de las etiquetas ... incluso Los que borraste antes. Por favor tenlo en mente Necesitas agregar esto a la etiqueta...

Algo queda El código que escribió en functions.php se muestra en> Esta función está disponible.

Logotipo personalizado

Puedes sintonizar Opciones de logotipo personalizado Péguelo con unas pocas líneas de código Function.php:

</p> <p>add_theme_support ('custom-logo', array (// ALTO'height '=> 50, // ANCHO'width' => 250, // PERMITE FLEXIBILIDAD EN EL TAMAÑO'flex-height '=> true,' flex-width '=> verdadero, //' título-texto '=> matriz (' título del sitio ',' descripción del sitio '),));?>

add_theme_support( 'Logotipo personalizado', Gran cantidad(

// Alt

'elevado' => 50,

//Amplio

'Amplio' => 250,

// Permitir flexibilidad de tamaño

'Altura flexible' => verdadero,

'Ancho flexible' => verdadero,

"Texto del título" => Gran cantidad( "Título de la página", 'Descripción del sitio web' ),

) );

Ahora es un personalizador de WordPress. Elección del logo de Apariencia> Personalización> Logotipo del sitio...

al Muestra señales de que necesitas recuperarte Desde el código: Vaya a header.php y Buscar y eliminar Línea actual que representa el nombre del sitio:

</p> <p><a class="navbar-brand" href="https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#" target="_blank" rel="noopener">Cargador</a>

<Amable Excelente="Marca de la barra de navegación" href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">Empezar Cargador</Amable>

En su lugar, use la función the_custom_logo () para Obtener un logotipo de etiquetaContiene...

Si bien esta función ya le permite mostrar el logotipo, le recomiendo Comprobar compatibilidad Características (introducidas con WordPress 4.5) Si no es compatible, debería Mostrar título de página...

Si es compatible, se mostrará el logotipo. Si no es así, hay una cosa que puedes enseñar Bandera estándar Como consecuencia:

</p> <p> // Asegúrese de que sea compatible con el logotipo personalizado if (function_exists ('the_custom_logo')) {// Asegúrese de que el logotipo esté configurado en el personalizador de WordPress if (has_custom_logo ()) {// Si está configurado, showki the_custom_logo (); } // De lo contrario, muestra el logotipo predeterminado. De lo contrario, {echo get_template_directory_uri () .'https: //serv1.raiolanetworks.es/img/raiola.png ';}}

// Comprueba si es compatible con el logo personalizado

si( Función disponible( 'the_custom_logo' ) ) {

// Comprueba si el logo está configurado en el personalizador de WordPress

si(has_custom_logo()) {

// si está configurado showki

the_custom_logo();

}

// De lo contrario, muestre el logotipo predeterminado.

Otro {

eco get_template_directory_uri()...'https://serv1.raiolanetworks.es/img/raiola.png';

}

menú

Hacer Menú en WordPress, Debería Regístrese en functions.php después Muéstrelo en header.php. a el seguimiento:

</p> <p>add_action ('after_setup_theme', 'raiola_registrar_menu'); Función raiola_registrar_menu () {register_nav_menu ('Menú principal', 'Menú principal');}

Agregar acción( 'after_setup_theme', 'raiola_registrar_menu' );

función raiola_registrar_menu() {

register_nav_menu( 'Menú principal', 'Menú principal' );

}

Entonces te suscribes Puede cambiar el menú eligiendo Ver> Menú. En su panel de WordPress.

Después del registro, puede usar esta función para mostrarla en la ubicación deseada. wp_nav_menu ()...

andar Archivo de cabeza Y busque el código HTML del menú:

</p> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#" target="_blank" rel="noopener">Página de inicio<span class="sr-only">(Actual)</span></a></li> <li class="nav-item"> <a class="nav-link" href="https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#" target="_blank" rel="noopener">Ö</a></li> <li class="nav-item"><a class="nav-link" href="https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#" target="_blank" rel="noopener">Servicio</a></li> <li class="nav-item"><a class="nav-link" href="https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#" target="_blank" rel="noopener">tocar</a></li> </ul> </div> <p>

Cuarto

Sexto

Séptimo

ocho

nueve

diez

once

catorce

quince

dieciséis

Dieciocho

<Amable Excelente="Enlaces de navegación" href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">La familia

<Página de inicio Excelente="Solo Sr.">(Actual)</Página de inicio>

</Amable>

</existe>

</existe>

<Amable Excelente="Enlaces de navegación" href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">Servicio</Amable>

</existe>

<Amable Excelente="Enlaces de navegación" href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">tocar</Amable>

</existe>

</Ese>

</div>

Elimina el HTML y coloca la función en su lugar. wp_nav_menu ()... Construcción Muestra las opciones para el menú que registró en functions.php Y nombrar Clase CSS De la plantilla HTML:

</p> <p>$ menuraiola = array ('menu' => 'menu-important', 'container' => 'div', 'container_class' => 'collapse navbar-collapse', 'container_id' => 'navbarResponsive', 'menu_class' = > 'navbar-nav ml-auto', 'menu_id' => '', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '</p> <ul id="%1$s" class="%2$s"> % 3 $ s</ul> <p> ',' item_spacing '=>' guardar ',' profundidad '=> 0,' caminante '=>' ',' ubicación_tema '=>' ',); wp_nav_menu ($ menuraiola); ?>

Cuarto

Sexto

Séptimo

ocho

nueve

diez

once

catorce

quince

dieciséis

Dieciocho

PSmenú = Gran cantidad(

'Menú' => 'Menú principal',

'Envase' => 'div',

'Clase de contenedor' => "Contraiga la barra de navegación para contraerla",

'ID de contenedor' => 'Responder desde la barra de navegación',

"Categoría de menú" => 'navbar-nav ml-auto',

'menu_id' => '',

'Eco' => verdadero,

'fallback_cb' => 'wp_page_menu',

'Hacia adelante' => '',

'Atrás' => '',

'link_before' => '',

'enlace a' => '',

'items_wrap' => '

% 3 $ s

'Element_distance' => 'ahorrar',

'Profundidad' => 0,

'Ayuda a caminar' => '',

"Ubicación del objeto" => '',

);

wp_nav_menu(PSmenú);

Como plantilla de arranque original Necesita una clase de CSS

Del menú necesitas Agrega uno Filtrar WordPress Enséñalo:
</p> <p>add_filter ('nav_menu_css_class', 'raiola_nav_class', 10, 2); Función raiola_nav_class ($ classes, $ Item) {$ classes[] = 'Enlace de navegación'; Devolver $ clases;}
Añadir filtro('nav_menu_css_class' , 'raiola_nav_class' , diez , 2);
función raiola_nav_class(PSExcelente, PScosa){
PSExcelente[] = "Enlace de navegación";
regreso PSExcelente;
}
Ahora tu tienes Menú dinámico y personalizable De WordPress.
Footer.php
Ese Pie de página Fue creado como título, Extraiga el código de index.php para ponerlo en un archivo footer.php separado...
Lo mismo Crea un archivo footer.php en tu carpeta de temas. más tarde Hay index.php Y defina el código de pie de página actual al final del documento:
</p> <footer class="py-5 bg-dark"> <div class="container"> <p class="m-0 text-center text-white">Copyright © Su sitio web 2019</p> </div> <p></footer> <p>
<Pie de página Excelente="Pi-5 BG-oscuro">
<div Excelente="Envase">
<fósforo Excelente="M-0 Text-Middle-Text-White">Copyright © YDupdo; Ella Sitio web Año 2019</fósforo>
</div>
<!—— /...Envase ——>
</Pie de página>
Este bloque de código Lo cortas con una etiqueta de cierre con ... Lo pega en el footer.php, Entonces:
</p> <p> </p> <footer class="py-5 bg-dark"> <div class="container"> <p class="m-0 text-center text-white">Copyright © Su sitio web 2019</p> </div> <p></footer> <p></body></html>
<!—— Pie de página ——>
<Pie de página Excelente="Pi-5 BG-oscuro">
<div Excelente="Envase">
<fósforo Excelente="M-0 Text-Middle-Text-White">Copyright © YDupdo; Ella Sitio web Año 2019</fósforo>
</div>
<!—— /...Envase ——>
</Pie de página>
<!—— Cargador nuclear JavaScript ——>
</cuerpo>
</html>
al Mostrar pie de páginaY tomar Finalmente de index.php (Dónde cortar el código HTML) y Llamada de footer.php con get_footer (); Entonces:
Tu ya lo tienes Pie de página de lista de WordPress... si quieres agregarle un poco de vitalidad, edita Cadena de derechos de autor Demostrar Nombre del Sitio Web Funcional Información del blog () con Año actual con PHP:
</p> <p class="m-0 text-center text-white">derechos de autor ©<?php bloginfo('name'); echo ' '.date('Y'); ?></p> <p><?php wp_footer(); ?>
<fósforo Excelente="El texto m-0 en el medio del texto es blanco">Copyright © YDupdo; Información del blog('Apellido'); eco ''...fecha('con'); ?> </fósforo>
wp_footer(); ?>
También por Mejorar la compatibilidad de temas, Agregar función de WordPressegundo wp_footer () (Realiza funciones similares a wp_head.php) Solo Antes de cerrar la etiqueta del cuerpo...
El archivo footer.php debería verse así:
</p> <p>.page-numbers {posición: relativa; Pantalla: bloque en línea; Llenado: .5rem .75rem; Margen izquierdo: -1px; Altura de la fila: 1,25; Color: # 007bff; Color de fondo: #fff; Fotograma: 1px fijo # dee2e6; } .raiola-paginacion {alineación del texto: medio;}
...Página de libro——número {
morada: relativamente;
Exposición: Cola——bloqueo;
relleno: ...5rem ...75 rem;
Usar——Quédate: ——1 píxel;
Un hilo——elevado: 1,25;
color: # 007bff;
antecedentes——color: #F ff;
la frontera: 1 píxel pesado # dee2e6;
}
...Raiola——Paginación {
texto——Retransmitir un mensaje: central;
}
Sidebar.php
La barra lateral es Elementos dinámicos de WordPress Permitir la visualización de widgets guardados en. configurado Aparencia> Gadgets...
Para personalizar la barra lateral, Tienes que registrarlo en functions.php Como consecuencia:
</p> <p>// INICIAR SESIÓN EN Sidebar add_action ('widgets_init', 'raiola_registrar_sidebar'); function raiola_registrar_sidebar () {register_sidebar (array ('name' => 'Sidebar', 'id' => 'sidebar-raiola', 'description' => 'Barralateral del thema Raiola.', // DIVs del sidebar en documento HTML 'before_widget' => '</p> <div id="%1$s" class="card my-4 %2$s"> ',' after_widget '=>'</div> </div> <p> ',' vor_titel '=>'</p> <h5 class="card-header"> ',' nach_title '=>'</h5> <div class="card-body"> ',));}
// Registra la barra lateral
Agregar acción( 'widgets_init', 'raiola_registrar_sidebar' );
función raiola_registrar_sidebar() {
Registrar la barra lateral( Gran cantidad(
'Apellido' =>"Pared lateral",
'ME GUSTARÍA' => 'Sidebar Raiola',
'describir' => Barra lateral del tema Raiola.,
// Barra lateral DIV en el documento HTML
'before_widget' => '
',
"nach_Widget" => '
',
'before_title' => '
',
"por titulo" => '

',
) );
}
Con este, WordPress sabrá que su tema tiene una barra lateral. Ahora necesitas Muéstralo en tu plantilla... Dentro de Carpeta de temas, cree un archivo sidebar.php... Entonces en Index.php, Giro de vuelta Código HTML según la barra lateral:
</p> <div class="col-md-4"></p> <div class="card my-4"> <h5 class="card-header">buscar</h5> <div class="card-body"> <div class="input-group"><input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"><button class="btn btn-secondary" type="button">¡andar!</button></span></div> </div> </div> <p></p> <div class="card my-4"> <h5 class="card-header"> categoría</h5> <div class="card-body"> <div class="row"> <div class="col-lg-6"> <ul class="list-unstyled mb-0"> <li> <a href="https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#" target="_blank" rel="noopener">diseño web</a></li> <li> <a href="https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#" target="_blank" rel="noopener">Archivo HTML</a></li> <li> <a href="https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#" target="_blank" rel="noopener">Regalar</a></li> </ul> </div> <div class="col-lg-6"> <ul class="list-unstyled mb-0"> <li> <a href="https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#" target="_blank" rel="noopener">JavaScript</a></li> <li> <a href="https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#" target="_blank" rel="noopener">CSS</a></li> <li> <a href="https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#" target="_blank" rel="noopener">Tutoriales</a></li> </ul> </div> </div> </div> </div> <p></p> <div class="card my-4"> <h5 class="card-header"> Widget de páginas</h5> <div class="card-body">Puede colocar lo que quiera en estos widgets de página. ¡Son fáciles de usar y vienen con la nueva bandeja de tarjetas Bootstrap 4!</div> </div> </div> <p>
1
2
3
Cuarto
5
Sexto
Séptimo
ocho
nueve
diez
once
12
13
catorce
quince
dieciséis
17
Dieciocho
19
20
21
Veintidós
veintitrés
24
25
26
27
28 años
29
treinta
31 años
32
33
34
35 años
36
37
38
39
40
41 años
42
43 años
44 años
45
46
47
48
49
50
51
52
53
54
55
56
57 años
58
59
<div Excelente="Kol-md-4">
<!—— buscar herramientas pequeñas ——>
<div Excelente="Postal Mi 4">
<H5 Excelente="Jefe de la carta">buscar</H5>
<div Excelente="Cuerpo de la tarjeta">
<div Excelente="Grupo de entrada">
<Ingresar Tipo de="Texto" Excelente="Control de formulario" Agregar="Buscar...">
<Página de inicio Excelente="Grupo de entrada-btn">
<botón Excelente="BTN BTN secundaria" Tipo de="Botón">andar!</botón>
</Página de inicio>
</div>
</div>
</div>
<!—— categoría herramientas pequeñas ——>
<div Excelente="Postal Mi 4">
<H5 Excelente="Jefe de la carta">categoría</H5>
<div Excelente="Cuerpo de la tarjeta">
<div Excelente="Línea">
<div Excelente="Col-LG-6">
<Ese Excelente="Lista sin estilo mb-0">
<existe>
<Amable href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">Internet borrador</Amable>
</existe>
<existe>
<Amable href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">Archivo HTML</Amable>
</existe>
<existe>
<Amable href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">Regalar</Amable>
</existe>
</Ese>
</div>
<div Excelente="Col-LG-6">
<Ese Excelente="Lista sin estilo mb-0">
<existe>
<Amable href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">JavaScript</Amable>
</existe>
<existe>
<Amable hrefLa firma es la misma"Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">CSS</Amable>
</existe>
<existe>
<Amable href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">Tutoriales</Amable>
</existe>
</Ese>
</div>
</div>
</div>
</div>
<!—— página herramientas pequeñas ——>
<div Excelente="Postal Mi 4">
<H5 Excelente="Jefe de la carta">página herramientas pequeñas</H5>
<div Excelente="Cuerpo de la tarjeta">
ella podría lugar algunos ella pensar v de Estas página piezas pequeñas... tu sí señor sencillo llegar usar, con Especialidad Ese Nuevo Cargador Cuarto mapa Envase!
</div>
</div>
</div>
Cortalo Péguelo en sidebar.phpDonde la barra lateral HTML está truncada en index.php, agregue la función get_sidebar () para llamar a sidebar.php:
</p> <p> <br /> <?php get_sidebar(); ?>
<!—— Pared lateral herramientas pequeñas pilar ——>
Obtener la barra lateral(); ?>
Ahora en sidebar.php puedes Eliminar widgets HTML estáticos pero Llama Widgets de WordPress Utilice la función dynamic_sidebar ():
</p> <div class="col-md-4"> <p> <?php dynamic_sidebar( 'sidebar-raiola' ); ?></p></div> <p>
<div Excelente="Kol-md-4">
Barra lateral dinámica( 'Sidebar Raiola' ); ?>
</div>
Usted ya tiene uno Barra lateral con funciones Se muestra un widget Puede personalizarlo en Apariencia> Widgets.
Paginación
si Tiene más artículos de los que se pueden mostrar en cada página. Necesitas Permitir que los usuarios se conectenHay una paginación de las contribuciones.
WordPress incluye Su propia función de intercambio, paginate_links (), Genera enlaces de navegación de forma automática.
Agregue la función a su tema, vaya a Index.php Y busque el bloque de código HTML para la paginación estática:
</p> <ul class="pagination justify-content-center mb-4"> <li class="page-item"> <a class="page-link" href="https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#" target="_blank" rel="noopener">← Mayor</a></li> <li class="page-item disabled"> <a class="page-link" href="https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#" target="_blank" rel="noopener">Nuevo →</a></li> </ul> <p>
<Ese Excelente="Paginación para alinear el centro de contenido mb-4">
<existe Excelente="Elemento de página">
<Amable Excelente="Enlace a la página" href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">YLar; más viejo</Amable>
</existe>
<existe Excelente="El elemento de la página está desactivado">
<Amable Excelente="Enlace a la página" href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">Más nuevo Yenojado;</Amable>
</existe>
</Ese>
Sustituir Función de WordPress más etiqueta
Posibilidad de personalizarlo y hacer que parezca una plantilla HTML:
</p> <nav class="raiola-paginacion"> <?php echo paginate_links(); ?><br /> </nav> <p>
<no Excelente="Paginación de Raiola">
eco Enlace de paginación(); ?>
</no>
Dado que este código no coincide exactamente con la plantilla de arranque, hay algunos que debe aplicar CSS conserva el estilo... existe Archivo de estilo.Añadir:
</p> <p>.page-numbers {posición: relativa; Pantalla: bloque en línea; Llenado: .5rem .75rem; Margen izquierdo: -1px; Altura de la fila: 1,25; Color: # 007bff; Color de fondo: #fff; Fotograma: 1px fijo # dee2e6; } .raiola-paginacion {alineación del texto: medio;}</style> <p> BLOQUE DE CODIGO 25 </p> <footer class="py-5 bg-dark"> <div class="container"> <p class="m-0 text-center text-white"> Copyright © <?php bloginfo('name'); echo ' '.date('Y'); ?></p> </div> <p></footer> <p><?php wp_footer(); ?></body></html>
1
2
3
Cuarto
5
Sexto
Séptimo
ocho
nueve
diez
once
12
13
catorce
quince
dieciséis
17
Dieciocho
19
20
21
Veintidós
veintitrés
24
25
26
27
28 años
29
treinta
31 años
...Página de libro——número {
morada: relativamente;
Exposición: Cola——bloqueo;
relleno: ...5rem ...75 rem;
Usar——Quédate: ——1 píxel;
A hilo——elevado: 1,25;
color: # 007bff;
antecedentes——color: #F ff;
la frontera: 1 píxel pesado # dee2e6;
}
...Raiola——Paginación {
texto——Retransmitir un mensaje: central;
}
</estilo> bloqueo de código 25
<!—— Pie de página ——>
<Pie de página Excelente="Pi-5 BG-oscuro">
<div Excelente="Envase">
<fósforo Excelente="M-0 Text-Middle-Text-White">Copyright © YDupdo; Información del blog('Apellido'); eco ''...fecha('con'); ?> </fósforo>
</div>
<!—— /...Envase ——>
</Pie de página>
wp_footer(); ?>
<!—— Cargador nuclear JavaScript ——>
</cuerpo>
</html>
Tu ya lo tienes Paginación A este tema.
recordar Eliminar la paginación HTML estática Plantillas para no confundir a los usuarios.
Cree una plantilla para publicaciones en el tema de WordPress (single.php)
Aunque el tema ha sido reconocido por WordPress y se puede activar, También necesitarás algunas plantillas Haz que funcione correctamente. En este caso, por ejemplo Email...
Pero no te preocupes No tiene que pasar por todo lo anterior. De nuevo, porque ya Crea componentes comunes (Encabezado, barra lateral y pie de página).
En single.php, usará lo siguiente función:
the_title (): mostrar Cabecera del artículo...
the_author (): búsqueda Nombre del autor...
the_category (): crea una lista Categorías de trabajo...
the_date (): mostrar Fecha de lanzamiento...
the_post_thumbnail (): Buscar Excelente foto rápido.
the_content (): mostrar Mensaje de texto...
Crear Plantilla de mensajeCrea un archivo llamado .Php único En tu carpeta de temas...
En este nuevo archivo pones Encabezado y pié de página Llámelos usando los métodos apropiados:
</p> <p><?php get_header(); ?><?php get_footer(); ?>
get_header(); ?>
<!—— contenido de Uno ——>
get_footer(); ?>
abrir documento Post.html de la plantilla Bootstrap Lo descargaste primero. Este archivo Contiene diseño HTML rápido. Copia el bloque de código que muestra el artículo..Sin encabezado y pie de página:
</p> <p> </p> <div class="container"> <div class="row"></p> <div class="col-lg-8"></p> <h1 class="mt-4"> Título de la entrada</h1> <p></p> <p class="lead">atravesar<a href="https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#" target="_blank" rel="noopener">Cargador</a></p> <hr> <p></p> <p>Publicado a las 12:00 PM, 1 de enero de 2019 </p> <hr> <p><img decoding="async" loading="lazy" class="img-fluid rounded" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="https://closermarketing.es/wp-content/uploads/2021/10/900x300.png"><noscript><img decoding="async" loading="lazy" class="img-fluid rounded" src="https://closermarketing.es/wp-content/uploads/2021/10/900x300.png" alt=""></noscript></p> <hr> <p></p> <p class="lead"> El dolor en sí mismo es amor. ¿Pero creemos que es ciega?</p> <p> El dolor en sí mismo es amor. Como resultado, el niño está absorto en el dolor y el trabajo duro. Si esta persona se interpone en su camino, la odiará y no será posible evitar los momentos tristes que se han dicho. Si es divertido.</p> <p> El dolor en sí mismo es amor. Puedes ver su dolor en su dolor. Es solo el dolor de los halagos. Lo sigues y, por ejemplo, no te caerás sobre él, ¿verdad?</p> <blockquote class="blockquote"> <p class="mb-0"> El dolor es el amor en sí mismo y el logotipo principal del cliente es lo primero.</p> <footer class="blockquote-footer"> para<cite title="来源标题">Nombre de la fuente</cite>Persona famosa</footer> </blockquote> <p>El dolor en sí es un error de amor, el nuestro, algo, un error de la mente, de modo que todo el tiempo es un momento cómodo que me gusta, y cualquier otra expresión no suele cegarse por la más mínima felicidad.</p> <p> El dolor en sí mismo es amor, todo dolor. ¿Cómo explico que tienen un marco de tiempo específico porque el deseo de felicidad es un tipo de felicidad que a menudo se busca pero nunca se acepta? Quien lo necesita</p> <hr> <p></p> <div class="card my-4"> <h5 class="card-header"> Deja un comentario: </h5> <div class="card-body"> <form> <div class="form-group"><textarea class="form-control" rows="3">

Nombre del comentarista
Muchas etiquetas gratis mañana, sin embarazo. Incluso antes del evento, el chocolate no tenía miedo. El odio puro del mañana, el arco de los Juegos Olímpicos, la época vergonzosa de los dibujos animados. Fusce condimentum nunc ac nisi vulputate fringilla. Hasta que el borde del gato esté en la garganta.

Nombre del comentarista
Muchas etiquetas gratis mañana, sin embarazo. Incluso antes del evento, el chocolate no tenía miedo. El odio puro del mañana, el arco de la época vergonzosa de los Juegos Olímpicos de los dibujos animados. Fusce condimentum nunc ac nisi vulputate fringilla. Hasta que el borde del gato esté en la garganta.
Nombre del comentarista
Muchas etiquetas gratis mañana, sin embarazo. Incluso antes del evento, el chocolate no tenía miedo. El odio puro del mañana, el arco de los Juegos Olímpicos, la época vergonzosa de los dibujos animados. Fusce condimentum nunc ac nisi vulputate fringilla. Hasta que el borde del gato esté en la garganta.
Nombre del comentarista
Muchas etiquetas gratis mañana, sin embarazo. Incluso antes del evento, el chocolate no tenía miedo. El odio puro del mañana, el arco de los Juegos Olímpicos, la época vergonzosa de los dibujos animados. Fusce condimentum nunc ac nisi vulputate fringilla. Hasta que el borde del gato esté en la garganta.

buscar

categoría

Widget de páginas

Puede colocar lo que quiera en estos widgets de página. ¡Son fáciles de usar y vienen con la nueva bandeja de tarjetas Bootstrap 4!

Cuarto

Sexto

Séptimo

ocho

nueve

diez

once

catorce

quince

dieciséis

Dieciocho

Veintidós

veintitrés

28 años

treinta

31 años

35 años

41 años

43 años

44 años

57 años

sesenta y cinco

81 años

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

<!—— Página de libro contenido ——>

<!—— Email contenido pilar ——>

<!—— título ——>

<Hora 1 Excelente="MT-4">Email título</Hora 1>

<!—— autor ——>

<fósforo Excelente="dirigir">

ejecutar a través de

<Amable href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">Empezar Cargador</Amable>

</fósforo>

<hora>

<!—— fecha/Tiempo ——>

<fósforo>Publicado por existe enero 1, Año 2019 existe 12:00 tarde</fósforo>

<hora>

<!—— avance dibujo ——>

<hora>

<!—— Email contenido ——>

<fósforo Excelente="dirigir">gratitud yo mismo esfuerzos sentarse disfrute, Fortalecer Iterativo cine... Inhalamos, Vero, ceguera, o, Error cómo Razonable Nemo frecuentemente Algunos sentarse Cógelo hombre porque cuerpo Seleccione eos estupendo aceptado bocadillo para reducir inventor?</fósforo>

<fósforo>gratitud yo mismo esfuerzos sentarse disfrute, Fortalecer Iterativo cine... salir, la frontera Nació esfuerzos bocadillo Cual de mismo yo mismo cosas ceguera Molestar odio Qué esfuerzos Salida Segunda clase no Oralmente v El escape... ahora, felicidad...</fósforo>

<fósforo>gratitud yo mismo esfuerzos sentarse disfrute, Fortalecer Iterativo cine... EOS, Triste, tristeza normal halagar Dónde su él pista Todavía Oralmente el otoño alguna ella Ese Más lejos oportunidad causa principal Repeler Reunirse... al, A la derecha!</fósforo>

<Cotización en bloque Excelente="Bloque de cotización">

<fósforo Excelente="MB-0">gratitud yo mismo esfuerzos sentarse disfrute, Fortalecer caja cine... Entero hazlo juntos fue antes Amable En términos de...</fósforo>

<Pie de página Excelente="Citar pie de página">Alguien conocido existe

<Cita título="Nombre de la fuente">una fuente título</Cita>

</Pie de página>

</Cotización en bloque>

<fósforo>gratitud yo mismo esfuerzos sentarse disfrute, Fortalecer Iterativo cine... Error, nuestro, algunos, Espiritualmente, salir Cual de Eres bienvenido La historia completa sí señor Segunda clase producto no alguna Alias Modos Oralmente frecuentemente mínimo Salida Status quo disfrute ceguera?</fósforo>

<fósforo>gratitud yo mismo esfuerzos sentarse disfrute, Fortalecer Iterativo cine... fragante, esfuerzos OMS... sí señor, salir, explicar, Algunos la frontera causa principal Tiempo Sí, en serio felicidad sediento disfrute Qué frecuentemente buscar bajo ninguna circunstancia aceptado? OMS, necesitar, sí señor!</fósforo>

<hora>

<!—— Observaciones formulario ——>

<H5 Excelente="Jefe de la carta">Salida Amable Un comentario:</H5>

<Área de texto Excelente="Control de formulario" línea="3"></Área de texto>

</div>

<botón Tipo de="Correo" Excelente="Btn btn-main">Trabajo</botón>

</formulario>

</div>

<!—— Uno Un comentario ——>

<H5 Excelente="MT-0">Comentando en Apellido</H5>

Mañana sentarse disfrute Estilo libre está libre, existe embarazada no... no terciopelo año chocolate En términos de ansiedad... Mañana limpio odio, arco existe carne de res existe, Tiempo dibujos animados vergonzoso... Seleccione salsa ahora Corriente alterna ahorrar carne de res ecológicamente... Hasta que cima Tareas del hogar La resaca existe garganta...

</div>

<!—— Un comentario con Anidado Observaciones ——>

<H5 Excelente="MT-0">Comentando en Apellido</H5>

<H5 Excelente="MT-0">Comentando en Apellido</H5>

</div>

<H5 Excelente="MT-0">Comentando en Apellido</H5>

</div>

<!—— Pared lateral herramientas pequeñas pilar ——>

<!—— buscar herramientas pequeñas ——>

<H5 Excelente="Jefe de la carta">buscar</H5>

<Página de inicio Excelente="Grupo de entrada-btn">

<botón Excelente="BTN BTN secundaria" Tipo deLa firma es la misma"Botón">andar!</botón>

</Página de inicio>

</div>

<!—— categoría herramientas pequeñas ——>

<H5 Excelente="Jefe de la carta">categoría</H5>

<Amable href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">Internet borrador</Amable>

</existe>

<Amable href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">Archivo HTML</Amable>

</existe>

<Amable href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">Regalar</Amable>

</existe>

</Ese>

</div>

<Amable href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">JavaScript</Amable>

</existe>

</existe>

<Amable href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">Tutoriales</Amable>

</existe>

</Ese>

</div>

<!—— página herramientas pequeñas ——>

<H5 Excelente="Jefe de la carta">página herramientas pequeñas</H5>

ella podría lugar algunos ella pensar v de Estas página piezas pequeñas... tu sí señor sencillo llegar usar, con Especialidad Ese Nuevo Cargador Cuarto mapa Envase!

</div>

<!—— /...línea ——>

</div>

<!—— /...Envase ——>

Ese Inserte el archivo single.php entre el encabezado y el pie de página... inmediatamente, Eliminar barra lateral estática Y usa una llamada de función dinámica get_sidebar ():

</p> <p><?php get_header(); ?></p> <div class="container"> <div class="row"></p> <div class="col-lg-8"></p> <h1 class="mt-4"> Título de la entrada</h1> <p></p> <p class="lead">atravesar<a href="https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#" target="_blank" rel="noopener">Cargador</a></p> <hr> <p></p> <p>Publicado a las 12:00 PM, 1 de enero de 2019 </p> <hr> <p><img decoding="async" loading="lazy" class="img-fluid rounded" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="https://closermarketing.es/wp-content/uploads/2021/10/900x300.png"><noscript><img decoding="async" loading="lazy" class="img-fluid rounded" src="https://closermarketing.es/wp-content/uploads/2021/10/900x300.png" alt=""></noscript></p> <hr> <p></p> <p class="lead"> El dolor en sí mismo es amor. ¿Pero creemos que es ciega?</p> <p> El dolor en sí mismo es amor. Como resultado, el niño está absorto en el dolor y el trabajo duro. Si esta persona se interpone en su camino, la odiará y no será posible evitar los momentos tristes que se han dicho. Si es divertido.</p> <p> El dolor en sí mismo es amor. Puedes ver su dolor en su dolor. Es solo el dolor de los halagos. Lo sigues y, por ejemplo, no te caerás sobre él, ¿verdad?</p> <blockquote class="blockquote"> <p class="mb-0"> El dolor es el amor en sí mismo y el logotipo principal del cliente es lo primero.</p> <footer class="blockquote-footer"> para<cite title="来源标题">Nombre de la fuente</cite>Persona famosa</footer> </blockquote> <p>El dolor en sí es un error de amor, el nuestro, algo, un error de la mente, de modo que todo el tiempo es un momento cómodo que me gusta, y cualquier otra expresión no suele cegarse por la más mínima felicidad.</p> <p> El dolor en sí mismo es amor, todo dolor. Como explicare ¿Tiene un marco de tiempo específico, porque el deseo de felicidad es un tipo de felicidad que a menudo se busca pero nunca se acepta? Quien lo necesita </p> <hr> </div> <p><?php get_sidebar(); ?></div> <p></div> <p><?php get_footer(); ?>

Cuarto

Sexto

Séptimo

ocho

nueve

diez

once

catorce

quince

dieciséis

Dieciocho

Veintidós

veintitrés

28 años

treinta

31 años

35 años

41 años

43 años

44 años

57 años

sesenta y cinco

get_header(); ?>

<!—— contenido de Uno ——>

<!—— Página de libro contenido ——>

<!—— Email contenido pilar ——>

<!—— título ——>

<Hora 1 Excelente="MT-4">Email título</Hora 1>

<!—— autor ——>

<fósforo Excelente="dirigir">

ejecutar a través de

<Amable href="Https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/#">Empezar Cargador</Amable>

</fósforo>

<hora>

<!—— fecha/Tiempo ——>

<fósforo>Publicado por existe enero 1, Año 2019 existe 12:00 tarde</fósforo>

<hora>

<!—— avance dibujo ——>

<hora>

<!—— Email contenido ——>

<Cotización en bloque Excelente="Bloque de cotización">

<fósforo Excelente="MB-0">gratitud yo mismo esfuerzos sentarse disfrute, Fortalecer caja cine... Entero hazlo juntos fue antes Amable En términos de...</fósforo>

<Pie de página Excelente="Citar pie de página">Alguien conocido existe

<Cita título="Nombre de la fuente">una fuente título</Cita>

</Pie de página>

</Cotización en bloque>

<hora>

</div>

<!—— Pared lateral herramientas pequeñas pilar ——>

Obtener la barra lateral(); ?>

</div>

<!—— /...línea ——>

</div>

<!—— /...Envase ——>

get_footer(); ?>

Eliminar también el contenido del comentario.... En este artículo no voy a hablar de cómo surgió, pero te sugiero que lo revises Sistema de comentarios disponible para WordPress...

Hasta aquí El contenido del artículo es estático. Y cuando revisa una publicación, muestra la misma información. Ahora tienes que Obtener contenido de la base de datos...

En single.php, Creando un bucle en WordPress Recuperar contenido de la base de datos Desde la cabecera hasta la pared lateral frontal...

El bucle es el mismo que en index.php:

</p> <p><?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?><?php endwhile; else : ?></p> <p>Desafortunadamente no pudimos encontrar ninguna publicación.</p> <p><?php endif; ?>

si ( have_posts() ) : a pesar de que ( have_posts() ) : el cargo(); ?>

<!—— contenido de Email——>

Finalmente; Otro : ?>

<!—— con No es necesario sé Encontrar alguna——>

<fósforo>Ese pensar, No es necesario Tenemos Fundado conellaNS Email...</fósforo>

por si acaso; ?>

<!—— el fin de anillo——>

Lo único que falta es el código HTML para bucles y mensajes. Reemplazar contenido estático con funciones Te mencioné arriba.

Ese Contenido estático espalda Lo borrasPorque en cambio tienes que colocar Contenido(). Single.php debería verse así:

</p> <p><?php get_header(); ?></p> <div class="container"> <div class="row"></p> <div class="col-lg-8"><?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?></p> <h1 class="mt-4"><?php the_title(); ?></h1> <p></p> <p class="lead"> ejecutar a través de<?php the_author(); ?></p> <hr> <p></p> <p>Publicado por<?php the_date();?></p> <hr> <p><?php the_post_thumbnail('destacada',array( 'class' => 'img-fluido redondeado'));?></p> <hr> <p><?php the_content(); ?></p> <hr> <p><?php endwhile; else : ?></p> <p> Desafortunadamente no pudimos encontrar ninguna publicación. </p> <p><?php endif; ?></div> <p><?php get_sidebar(); ?></div> <p></div> <p><?php get_footer(); ?>

Cuarto

Sexto

Séptimo

ocho

nueve

diez

once

catorce

quince

dieciséis

Dieciocho

Veintidós

veintitrés

28 años

treinta

31 años

35 años

get_header(); ?>

<!—— Página de libro contenido ——>

<!—— Email contenido pilar ——>

si ( have_posts() ) : a pesar de que ( have_posts() ) : el cargo(); ?>

<!—— título ——>

<Hora 1 Excelente="MT-4"> título(); ?></Hora 1>

<!—— autor ——>

<fósforo ExcelenteLa firma es la misma"dirigir">

ejecutar a través de

autor(); ?>

</fósforo>

<hora>

<!—— fecha/Tiempo ——>

<fósforo>Publicado por fecha();?> </fósforo>

<hora>

<!—— avance dibujo ——>

the_post_thumbnail('sobresaliente',Gran cantidad( 'Excelente' => 'img-liquido redondo' )); ?>

<hora>

<!—— Email contenido ——>

contenido(); ?>

<hora>

Finalmente; Otro : ?>

<fósforo>Ese pensar, No es necesario Tenemos Fundado conellaNS Email...</fósforo>

por si acaso; ?>

</div>

<!—— Pared lateral herramientas pequeñas pilar ——>

Obtener la barra lateral(); ?>

</div>

<!—— /...línea ——>

</div>

<!—— /...Envase ——>

get_footer(); ?>

Ahora puedes ver la publicación sin ningún problema.

Crea una plantilla de página (page.php)

Single.php Se aplica solo a mensajes con Billete de idaAfortunadamente, crear plantillas de página es muy fácil.

Ese Apenas hay diferencia entre una publicación y una página.Entonces el código es Single.php se puede utilizar como base.

Mente abierta single.php y copia todo... crea un archivo Page.php Pegue una copia de single.php en su carpeta de temas.

Elimine la línea de código que muestra la categoría de la publicación (no hay ninguna categoría en la página) y guarde los cambios. El archivo page.php debería verse así:

Cuarto

Sexto

Séptimo

ocho

nueve

diez

once

catorce

quince

dieciséis

Dieciocho

Veintidós

veintitrés

28 años

treinta

31 años

35 años

get_header(); ?>

<!—— Página de libro contenido ——>

<!—— Email contenido pilar ——>

si ( have_posts() ) : a pesar de que ( have_posts() ) : el cargo(); ?>

<!—— título ——>

<Hora 1 Excelente="MT-4"> título(); ?></Hora 1>

<!—— autor ——>

<fósforo Excelente="dirigir">

ejecutar a través de

autor(); ?>

</fósforo>

<hora>

<!—— fecha/Tiempo ——>

<fósforo>Publicado por fecha();?> </fósforo>

<hora>

<!—— avance dibujo ——>

the_post_thumbnail('sobresaliente',Gran cantidad( 'Excelente' => 'img-liquido redondo' )); ?>

<hora>

<!—— Email contenido ——>

contenido(); ?>

<hora>

Finalmente; Otro : ?>

<fósforo>Ese pensar, No es necesario Tenemos Fundado conellaNS Email...</fósforo>

por si acaso; ?>

</div>

<!—— Pared lateral pequeños instrumentos pilar ——>

Obtener la barra lateral(); ?>

</div>

<!—— /...línea ——>

</div>

<!—— /...Envase ——>

get_footer(); ?>

Ahora puede ver la página correctamente.

Crear categorías y páginas de archivo

Ese Documentos ordenados por fecha y categoría Requerido para ver el artículo Cronológico y organizadoSin ellos, tendrá que recorrer todas las páginas de navegación.

existe Plantillas especiales para categorías, fechas y etiquetas,pero La plantilla general es archive.php.Una vez que haya compartido archivos, tendrá una base sobre la cual crear otros archivos.

Crea un archivo Archive.php en la carpeta del tema Y copia todo del index.php. A continuación, busque el bloque de código Título de la página:

</p> <h1 class="my-4">Título de la página<small>Texto de ayuda</small></h1> <p>

<Hora 1 Excelente="Mi-4">Página de libro título

<pequeña>Escuela intermedia texto</pequeña>

</Hora 1>

Este bloque de código, En index.php eliminarlo,Porque El índice no muestra el título de esta manera...

existe Archivo.php Usted colocará Encabezados condicionales en PHP Según sea un archivo por fecha o un archivo categorizado (categoría, etiqueta, etc.):

</p> <p> </p> <h1 class="my-4"> <?php //Verificar que el archivo sea de fecha if(get_the_archive_title()){ //Si es un archivo de fecha, mostrar el titulo de fecha the_archive_title(); } //Si NO es una fecha else{ //Mostrar el título del término single_term_title(); } ?><br /> </h1> <p><?php //Mostrar descripción del objeto echo term_description(); ?></p> <p>

<!—— título H1 de fósforoAmableGina ——>

// Comprueba si el archivo tiene fecha

si(hol_the_archive_title()){

// Si es un archivo de fecha, muestra el encabezado de la fecha

the_archive_title();

}

// si no es una cita

Otro{

// Muestra el título de la publicación

single_term_title();

} ?>

</Hora 1>

<fósforo> // Mostrar descripción del objeto

eco Term_description(); ?></fósforo>

Esta es una excelente manera de verificar que este es el caso. Archivar por fecha Exposición the_archive_title (); Si eso Categoría o etiqueta Ese single_term_title (); Y se Utilice term_description () para la descripción;

Cómo empaquetar un tema de WordPress

Otra ventaja de WordPress es PHP, HTML, CSS y JavaScript. No tienes que compilar Hay un paquete instalable... Simplemente pon Carpeta de temas con archivos en archivos ZIP comprimidos Y súbelo a WordPress.

Antes de empacar, No olvide eliminar los archivos innecesarios... con Algo inútil, no lo incluyas.

Si quieres hacer tu blog más rápido, te recomiendo este excelente. Guía de optimización de WordPress...

finalmente

En pocas palabras, crear un tema para WordPress (y cualquier otro CMS) significa convertir una página en HTML al sistema de plantillas...

Gracias a este tutorial, obtendrás tu primer tema básico Puede utilizar varias funciones para mejorarse continuamente: Desde el uso de un personalizador para mejorar el aspecto, hasta la creación de un botón de opción y la personalización del tipo de mensaje.

También puede personalizar otras plantillas HTML siguiendo los pasos que se mencionan aquí.

Si tiene alguna pregunta sobre el proceso de compilación, no dude en comentar el problema. Eso, por supuesto, puede resolverse.

Instalación y funciones de este tema de WordPress

Cómo instalar WordPress localmente: una guía paso a paso

La empresa siempre al día con un buen software de control

Estrategias de marketing B2B para impulsar tu negocio

Los beneficios del email marketing para las estrategias de negocio online

El Poder del Marketing Experiencial en Eventos Corporativos

Creciendo en la Empresa

Se aproxima el final del Concurso SEO Entrega de Premios Vocación Digital Raiola

Deja una respuesta Cancelar la respuesta
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *
Guarda mi nombre, correo electrónico y web en este navegador para la próxima vez que comente.

Crea una plantilla de WordPress desde cero

Lo básico: lo que necesita saber antes de comenzar a crear una plantilla de WordPress.

Herramientas: lo que necesitará para crear una plantilla de WordPress

Cómo crear una plantilla de WordPress desde cero

Crea la base para tu tema de WordPress

Sistema de carpetas

Archivo de estilo

Index.php

Círculo de entrada

Función de tema

Tamaño de la pintura

Soporte de encabezado

Logotipo personalizado

menú

Footer.php

', "por titulo" => '

Paginación

Nombre del comentarista

Nombre del comentarista

Nombre del comentarista

Nombre del comentarista

buscar

categoría

Widget de páginas

Crea una plantilla de página (page.php)

Crear categorías y páginas de archivo

Cómo empaquetar un tema de WordPress

finalmente

',
"por titulo" => '