Saltar al contenido
Closer Marketing
SEO

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.

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:

Plantilla de jerarquía de WordPress

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:

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á:

Tema de WordPress roto

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.

Fábrica-html-base-wordpressCrea una plantilla de WordPress desde cero [con archivos descargables] Cuarto" src="https://closermarketing.es/wp-content/uploads/2021/10/plantilla-html-base-wordpress.jpg"/>

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:

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:

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:

Publicaciones desnudas crean plantillas de WordPress

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

¡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:

Crea una plantilla de WordPress desde cero [con archivos descargables] 1

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

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><!-- Urvanov Syntax Highlighter v2.8.26 --></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" style=""> <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><!-- [Format Time: 0.0000 seconds] --></p> <h4><span class="ez-toc-section" id="Estilo_de_diseno"></span><em><b>Estilo de diseño</b></em><span class="ez-toc-section-end"></span></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><!-- Urvanov Syntax Highlighter v2.8.26 --></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" style=""> <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><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><!-- [Format Time: 0.0001 seconds] --></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><!-- Urvanov Syntax Highlighter v2.8.26 --></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" style=""> <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><!-- [Format Time: 0.0001 seconds] --></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><!-- Urvanov Syntax Highlighter v2.8.26 --></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><!-- Bootstrap core CSS --> <link href="https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/css/bootstrap.min.css" rel="stylesheet"> <p><!-- Custom styles for this template --> <link href="style.css" rel="stylesheet"></textarea></p> <div class="urvanov-syntax-highlighter-main" style=""> <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><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><!-- [Format Time: 0.0001 seconds] --></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> <h3/><span class="ez-toc-section" id="WordPress_es_posible_Elementos_de_grupo_Estos_se_repitieron_en_Internet_para_evitar_la_duplicacion_del_codigo_y_Optimizar_recursos%E2%80%A6_Los_elementos_permanentes_en_toda_la_red_suelen_ser_Encabezado_pie_de_pagina_y_barra_lateral%E2%80%A6_WordPress_permite_la_creacion_de_Por_archivo_Archivo_de_cabeza_WordPress_Crea_automaticamente_titulos_de_menu_y_pagina_Entonces_todo_desde_el_menu_de_navegacion_puede_estar_contenido_en_un_archivo_PHP_andar_Carpeta_de_temas_Como_el_archivo_en_el_que_creo_el_archivo_anterior_y_Crear_archivo_headerphp%E2%80%A6_Abra_el_archivo_indexphp_y_pequeno_Codigo_HTML_en_la_etiquetaHasta_el_finalal_Peguelo_en_headerphp_Como_les_muestro_a_continuacion_Pagina_de_inicio_del_blog_-_Plantilla_Bootstrap_Cargador_Pagina_de_inicioActual_O_Servicio_tocar_1_2_3_Cuarto_5_Sexto_Septimo_ocho_nueve_diez_once_12_13_catorce_quince_dieciseis_17_Dieciocho_19_20_21_Veintidos_veintitres_24_25_26_27_28_anos_29_treinta_31_anos_32_33_34_35_anos_36_37_38_39_40_41_anos_42_43_anos_44_anos_45_46_47_48_49_50_Blog_La_familia_-_Empezar_Cargador_muestra_Empezar_Cargador_La_familia_Actual_O_Servicio_tocar_El_objetivo_es_agregar_el_encabezado_pie_de_pagina_y_barra_lateral_de_otros_documentos_separar_al_Promover_la_gestion_del_estilo_Agregar_a_la_etiqueta_funcion_body_class_Ahora_en_indexphp_Debes_nombrar_el_archivo_al_principio_del_documento_el_seguimiento_Ya_tienes_un_indice_y_un_titulo_Relacionado_pero_En_un_archivo_separado%E2%80%A6_Aun_debe_realizar_algunos_cambios_porque_el_encabezado_no_puede_ser_HTML_puro_porque_hay_Metadatos_personales_Por_el_lado_Pagina_de_inicio_del_blog_-_Plantilla_Bootstrap_Blog_La_familia_-_Empezar_Cargador_muestra_Quita_esas_lineas_que_Sera_reemplazado_Funcion_de_WordPress_con_encabezado_especifico_wp_head_wp_head_responde_Mostrar_la_mayoria_de_las_etiquetas_%E2%80%A6_incluso_Los_que_borraste_antes_Por_favor_tenlo_en_mente_Necesitas_agregar_esto_a_la_etiqueta%E2%80%A6_Algo_queda_El_codigo_que_escribio_en_functionsphp_se_muestra_en%3E_Esta_funcion_esta_disponible_Logotipo_personalizado_Puedes_sintonizar_Opciones_de_logotipo_personalizado_Peguelo_con_unas_pocas_lineas_de_codigo_Functionphp_add_theme_support_custom-logo_array_ALTOheight_%3E_50_ANCHOwidth_%3E_250_PERMITE_FLEXIBILIDAD_EN_EL_TAMANOflex-height_%3E_true_flex-width_%3E_verdadero_titulo-texto_%3E_matriz_titulo_del_sitio_descripcion_del_sitio_%3E_add_theme_support_Logotipo_personalizado_Gran_cantidad_Alt_elevado_%3E_50_Amplio_Amplio_%3E_250_Permitir_flexibilidad_de_tamano_Altura_flexible_%3E_verdadero_Ancho_flexible_%3E_verdadero_%C2%ABTexto_del_titulo%C2%BB_%3E_Gran_cantidad_%C2%ABTitulo_de_la_pagina%C2%BB_Descripcion_del_sitio_web_%3E_Ahora_es_un_personalizador_de_WordPress_Eleccion_del_logo_de_Apariencia%3E_Personalizacion%3E_Logotipo_del_sitio%E2%80%A6_al_Muestra_senales_de_que_necesitas_recuperarte_Desde_el_codigo_Vaya_a_headerphp_y_Buscar_y_eliminar_Linea_actual_que_representa_el_nombre_del_sitio_Cargador_Empezar_Cargador_En_su_lugar_use_la_funcion_the_custom_logo_para_Obtener_un_logotipo_de_etiquetaContiene%E2%80%A6_Si_bien_esta_funcion_ya_le_permite_mostrar_el_logotipo_le_recomiendo_Comprobar_compatibilidad_Caracteristicas_introducidas_con_WordPress_45_Si_no_es_compatible_deberia_Mostrar_titulo_de_pagina%E2%80%A6_Si_es_compatible_se_mostrara_el_logotipo_Si_no_es_asi_hay_una_cosa_que_puedes_ensenar_Bandera_estandar_Como_consecuencia_Asegurese_de_que_sea_compatible_con_el_logotipo_personalizado_if_function_exists_the_custom_logo_Asegurese_de_que_el_logotipo_este_configurado_en_el_personalizador_de_WordPress_if_has_custom_logo_Si_esta_configurado_showki_the_custom_logo_De_lo_contrario_muestra_el_logotipo_predeterminado_De_lo_contrario_echo_get_template_directory_uri_https_serv1raiolanetworksesimgraiolapng_Comprueba_si_es_compatible_con_el_logo_personalizado_si_Funcion_disponible_the_custom_logo_Comprueba_si_el_logo_esta_configurado_en_el_personalizador_de_WordPress_sihas_custom_logo_si_esta_configurado_showki_the_custom_logo_De_lo_contrario_muestre_el_logotipo_predeterminado_Otro_eco_get_template_directory_uri%E2%80%A6https_serv1raiolanetworksesimgraiolapng_menu_Hacer_Menu_en_WordPress_Deberia_Registrese_en_functionsphp_despues_Muestrelo_en_headerphp_a_el_seguimiento_add_action_after_setup_theme_raiola_registrar_menu_Funcion_raiola_registrar_menu_register_nav_menu_Menu_principal_Menu_principal_Agregar_accion_after_setup_theme_raiola_registrar_menu_funcion_raiola_registrar_menu_register_nav_menu_Menu_principal_Menu_principal_Entonces_te_suscribes_Puede_cambiar_el_menu_eligiendo_Ver%3E_Menu_En_su_panel_de_WordPress_Despues_del_registro_puede_usar_esta_funcion_para_mostrarla_en_la_ubicacion_deseada_wp_nav_menu_%E2%80%A6_andar_Archivo_de_cabeza_Y_busque_el_codigo_HTML_del_menu_Pagina_de_inicioActual_O_Servicio_tocar_1_2_3_Cuarto_5_Sexto_Septimo_ocho_nueve_diez_once_12_13_catorce_quince_dieciseis_17_Dieciocho_19_La_familia_Actual_O_Servicio_tocar_Elimina_el_HTML_y_coloca_la_funcion_en_su_lugar_wp_nav_menu_%E2%80%A6_Construccion_Muestra_las_opciones_para_el_menu_que_registro_en_functionsphp_Y_nombrar_Clase_CSS_De_la_plantilla_HTML_menuraiola_array_menu_%3E_menu-important_container_%3E_div_container_class_%3E_collapse_navbar-collapse_container_id_%3E_navbarResponsive_menu_class_%3E_navbar-nav_ml-auto_menu_id_%3E_%C2%BB_echo_%3E_true_fallback_cb_%3E_wp_page_menu_before_%3E_%C2%BB_after_%3E_%C2%BB_link_before_%3E_%C2%BB_link_after_%3E_%C2%BB_items_wrap_%3E_3_s_item_spacing_%3E_guardar_profundidad_%3E_0_caminante_%3E_ubicacion_tema_%3E_wp_nav_menu_menuraiola_%3E_1_2_3_Cuarto_5_Sexto_Septimo_ocho_nueve_diez_once_12_13_catorce_quince_dieciseis_17_Dieciocho_19_20_21_PSmenu_Gran_cantidad_Menu_%3E_Menu_principal_Envase_%3E_div_Clase_de_contenedor_%3E_%C2%ABContraiga_la_barra_de_navegacion_para_contraerla%C2%BB_ID_de_contenedor_%3E_Responder_desde_la_barra_de_navegacion_%C2%ABCategoria_de_menu%C2%BB_%3E_navbar-nav_ml-auto_menu_id_%3E_%C2%BB_Eco_%3E_verdadero_fallback_cb_%3E_wp_page_menu_Hacia_adelante_%3E_%C2%BB_Atras_%3E_%C2%BB_link_before_%3E_%C2%BB_enlace_a_%3E_%C2%BB_items_wrap_%3E_3_s_Element_distance_%3E_ahorrar_Profundidad_%3E_0_Ayuda_a_caminar_%3E_%C2%BB_%C2%ABUbicacion_del_objeto%C2%BB_%3E_%C2%BB_wp_nav_menuPSmenu_%3E_Como_plantilla_de_arranque_original_Necesita_una_clase_de_CSS_Del_menu_necesitas_Agrega_uno_Filtrar_WordPress_Ensenalo_add_filter_nav_menu_css_class_raiola_nav_class_10_2_Funcion_raiola_nav_class_classes_Item_classes_Enlace_de_navegacion_Devolver_clases_Anadir_filtronav_menu_css_class_raiola_nav_class_diez_2_funcion_raiola_nav_classPSExcelente_PScosa_PSExcelente_%C2%ABEnlace_de_navegacion%C2%BB_regreso_PSExcelente_Ahora_tu_tienes_Menu_dinamico_y_personalizable_De_WordPress_Footerphp_Ese_Pie_de_pagina_Fue_creado_como_titulo_Extraiga_el_codigo_de_indexphp_para_ponerlo_en_un_archivo_footerphp_separado%E2%80%A6_Lo_mismo_Crea_un_archivo_footerphp_en_tu_carpeta_de_temas_mas_tarde_Hay_indexphp_Y_defina_el_codigo_de_pie_de_pagina_actual_al_final_del_documento_Copyright_%C2%A9_Su_sitio_web_2019_Copyright_%C2%A9_YDupdo_Ella_Sitio_web_Ano_2019_Este_bloque_de_codigo_Lo_cortas_con_una_etiqueta_de_cierre_con_%E2%80%A6_Lo_pega_en_el_footerphp_Entonces_Copyright_%C2%A9_Su_sitio_web_2019_Copyright_%C2%A9_YDupdo_Ella_Sitio_web_Ano_2019_al_Mostrar_pie_de_paginaY_tomar_Finalmente_de_indexphp_Donde_cortar_el_codigo_HTML_y_Llamada_de_footerphp_con_get_footer_Entonces_Tu_ya_lo_tienes_Pie_de_pagina_de_lista_de_WordPress%E2%80%A6_si_quieres_agregarle_un_poco_de_vitalidad_edita_Cadena_de_derechos_de_autor_Demostrar_Nombre_del_Sitio_Web_Funcional_Informacion_del_blog_con_Ano_actual_con_PHP_derechos_de_autor_%C2%A9_Copyright_%C2%A9_YDupdo_Tambien_por_Mejorar_la_compatibilidad_de_temas_Agregar_funcion_de_WordPressegundo_wp_footer_Realiza_funciones_similares_a_wp_headphp_Solo_Antes_de_cerrar_la_etiqueta_del_cuerpo%E2%80%A6_El_archivo_footerphp_deberia_verse_asi_page-numbers_posicion_relativa_Pantalla_bloque_en_linea_Llenado_5rem_75rem_Margen_izquierdo_-1px_Altura_de_la_fila_125_Color_007bff_Color_de_fondo_fff_Fotograma_1px_fijo_dee2e6_raiola-paginacion_alineacion_del_texto_medio_%E2%80%A6Pagina_de_libro-numero_morada_relativamente_Exposicion_Cola-bloqueo_relleno_%E2%80%A65rem_%E2%80%A675_rem_Usar-Quedate_-1_pixel_Un_hilo-elevado_125_color_007bff_antecedentes-color_F_ff_la_frontera_1_pixel_pesado_dee2e6_%E2%80%A6Raiola-Paginacion_texto-Retransmitir_un_mensaje_central_Sidebarphp_La_barra_lateral_es_Elementos_dinamicos_de_WordPress_Permitir_la_visualizacion_de_widgets_guardados_en_configurado_Aparencia%3E_Gadgets%E2%80%A6_Para_personalizar_la_barra_lateral_Tienes_que_registrarlo_en_functionsphp_Como_consecuencia_INICIAR_SESION_EN_Sidebar_add_action_widgets_init_raiola_registrar_sidebar_function_raiola_registrar_sidebar_register_sidebar_array_name_%3E_Sidebar_id_%3E_sidebar-raiola_description_%3E_Barralateral_del_thema_Raiola_DIVs_del_sidebar_en_documento_HTML_before_widget_%3E_after_widget_%3E_vor_titel_%3E_nach_title_%3E_Registra_la_barra_lateral_Agregar_accion_widgets_init_raiola_registrar_sidebar_funcion_raiola_registrar_sidebar_Registrar_la_barra_lateral_Gran_cantidad_Apellido_%3E%C2%ABPared_lateral%C2%BB_ME_GUSTARIA_%3E_Sidebar_Raiola_describir_%3E_Barra_lateral_del_tema_Raiola_Barra_lateral_DIV_en_el_documento_HTML_before_widget_%3E_%C2%ABnach_Widget%C2%BB_%3E_before_title_%3E_%C2%ABpor_titulo%C2%BB_%3E_Con_este_WordPress_sabra_que_su_tema_tiene_una_barra_lateral_Ahora_necesitas_Muestralo_en_tu_plantilla%E2%80%A6_Dentro_de_Carpeta_de_temas_cree_un_archivo_sidebarphp%E2%80%A6_Entonces_en_Indexphp_Giro_de_vuelta_Codigo_HTML_segun_la_barra_lateral_buscar_%C2%A1andar_categoria_diseno_web_Archivo_HTML_Regalar_JavaScript_CSS_Tutoriales_Widget_de_paginas_Puede_colocar_lo_que_quiera_en_estos_widgets_de_pagina_%C2%A1Son_faciles_de_usar_y_vienen_con_la_nueva_bandeja_de_tarjetas_Bootstrap_4_1_2_3_Cuarto_5_Sexto_Septimo_ocho_nueve_diez_once_12_13_catorce_quince_dieciseis_17_Dieciocho_19_20_21_Veintidos_veintitres_24_25_26_27_28_anos_29_treinta_31_anos_32_33_34_35_anos_36_37_38_39_40_41_anos_42_43_anos_44_anos_45_46_47_48_49_50_51_52_53_54_55_56_57_anos_58_59_buscar_andar_categoria_Internet_borrador_Archivo_HTML_Regalar_JavaScript_CSS_Tutoriales_pagina_herramientas_pequenas_ella_podria_lugar_algunos_ella_pensar_v_de_Estas_pagina_piezas_pequenas%E2%80%A6_tu_si_senor_sencillo_llegar_usar_con_Especialidad_Ese_Nuevo_Cargador_Cuarto_mapa_Envase_Cortalo_Peguelo_en_sidebarphpDonde_la_barra_lateral_HTML_esta_truncada_en_indexphp_agregue_la_funcion_get_sidebar_para_llamar_a_sidebarphp_Ahora_en_sidebarphp_puedes_Eliminar_widgets_HTML_estaticos_pero_Llama_Widgets_de_WordPress_Utilice_la_funcion_dynamic_sidebar_Usted_ya_tiene_uno_Barra_lateral_con_funciones_Se_muestra_un_widget_Puede_personalizarlo_en_Apariencia%3E_Widgets_Paginacion_si_Tiene_mas_articulos_de_los_que_se_pueden_mostrar_en_cada_pagina_Necesitas_Permitir_que_los_usuarios_se_conectenHay_una_paginacion_de_las_contribuciones_WordPress_incluye_Su_propia_funcion_de_intercambio_paginate_links_Genera_enlaces_de_navegacion_de_forma_automatica_Agregue_la_funcion_a_su_tema_vaya_a_Indexphp_Y_busque_el_bloque_de_codigo_HTML_para_la_paginacion_estatica_%E2%86%90_Mayor_Nuevo_%E2%86%92_YLar_mas_viejo_Mas_nuevo_Yenojado_Sustituir_Funcion_de_WordPress_mas_etiqueta_Posibilidad_de_personalizarlo_y_hacer_que_parezca_una_plantilla_HTML_Dado_que_este_codigo_no_coincide_exactamente_con_la_plantilla_de_arranque_hay_algunos_que_debe_aplicar_CSS_conserva_el_estilo%E2%80%A6_existe_Archivo_de_estiloAnadir_page-numbers_posicion_relativa_Pantalla_bloque_en_linea_Llenado_5rem_75rem_Margen_izquierdo_-1px_Altura_de_la_fila_125_Color_007bff_Color_de_fondo_fff_Fotograma_1px_fijo_dee2e6_raiola-paginacion_alineacion_del_texto_medio_BLOQUE_DE_CODIGO_25_Copyright_%C2%A9_1_2_3_Cuarto_5_Sexto_Septimo_ocho_nueve_diez_once_12_13_catorce_quince_dieciseis_17_Dieciocho_19_20_21_Veintidos_veintitres_24_25_26_27_28_anos_29_treinta_31_anos_%E2%80%A6Pagina_de_libro-numero_morada_relativamente_Exposicion_Cola-bloqueo_relleno_%E2%80%A65rem_%E2%80%A675_rem_Usar-Quedate_-1_pixel_A_hilo-elevado_125_color_007bff_antecedentes-color_F_ff_la_frontera_1_pixel_pesado_dee2e6_%E2%80%A6Raiola-Paginacion_texto-Retransmitir_un_mensaje_central_bloqueo_de_codigo_25_Copyright_%C2%A9_YDupdo_Tu_ya_lo_tienes_Paginacion_A_este_tema_recordar_Eliminar_la_paginacion_HTML_estatica_Plantillas_para_no_confundir_a_los_usuarios_Cree_una_plantilla_para_publicaciones_en_el_tema_de_WordPress_singlephp"></span> <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 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"/><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 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><!-- Urvanov Syntax Highlighter v2.8.26 --></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

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:

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:

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

Crea un tema de WordPress con un logo personalizado

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:

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:

menú

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

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ú:

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:

Como plantilla de arranque original Necesita una clase de CSS

  • Del menú necesitas Agrega uno Filtrar WordPress Enséñalo:

    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:

    Este bloque de código Lo cortas con una etiqueta de cierre con … Lo pega en el footer.php, Entonces:

    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:

    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í:

    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:

    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.phpEntonces en Index.php, Giro de vuelta Código HTML según la barra lateral:

    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:

    Ahora en sidebar.php puedes Eliminar widgets HTML estáticos pero Llama Widgets de WordPress Utilice la función dynamic_sidebar ():

    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:

    Sustituir Función de WordPress más etiqueta

  • 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

    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!

    ->

    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

    60

    61

    62

    63

    64

    sesenta y cinco

    66

    67

    68

    69

    70

    71

    72

    73

    74

    75

    76

    77

    78

    79

    80

    81 años

    82

    83

    84

    85

    86

    87

    88

    89

    90

    91

    92

    93

    94

    95

    96

    97

    98

    99

    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 ——>

    <div Excelente=«Envase»>

    <div Excelente=«Línea»>

    <!—— Email contenido pilar ——>

    <div Excelente=«Col-LG-8»>

    <!—— 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 ——>

    <dibujo Excelente=«Ronda de Img-Liquid» Archivo original=«Http://placehold.it/900×300» pequeña=«»>

    <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 ——>

    <div Excelente=«Postal Mi 4»>

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

    <div Excelente=«Cuerpo de la tarjeta»>

    <formulario>

    <div Excelente=«Formar un grupo»>

    <Á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>

    </div>

    <!—— Uno Un comentario ——>

    <div Excelente=«significa MB-4»>

    <dibujo Excelente=«D-flex mr-3 round» Archivo original=«Http://placehold.it/50×50» pequeña=«»>

    <div Excelente=«Cuerpo de medios»>

    <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>

    </div>

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

    <div Excelente=«significa MB-4»>

    <dibujo Excelente=«D-flex mr-3 round» Archivo original=«Http://placehold.it/50×50» pequeña=«»>

    <div Excelente=«Cuerpo de medios»>

    <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 Excelente=«MT-4 medio»>

    <dibujo Excelente=«D-flex mr-3 round» Archivo original=«Http://placehold.it/50×50» pequeña=«»>

    <div Excelente=«Cuerpo de medios»>

    <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>

    </div>

    <div Excelente=«MT-4 medio»>

    <dibujo Excelente=«D-flex mr-3 round» Archivo original=«Http://placehold.it/50×50» pequeña=«»>

    <div Excelente=«Cuerpo de medios»>

    <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>

    </div>

    </div>

    </div>

    </div>

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

    <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 deLa firma es la misma«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 href=«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>

    </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 ():

    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:

    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í:

    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í:

    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:

    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.):

    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 instalableSimplemente 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.

    Tabla de Contenido