Para alguien que quiere entrar en el desarrollo de WordPress, saber por dónde empezar ya puede ser difícil. En un artículo anterior, cubrimos 8 temas y marcos de trabajo iniciales que podrían ser una buena elección.
En este tutorial veremos cómo empezar a trabajar con los Subrayados, la primera opción de consenso para desarrolladores principiantes.
En primer lugar, vamos a empezar por descargar los guiones bajos. Antes de descargarlo, le pedirá que ponga un nombre para su tema.
No necesitas pensar en nada demasiado asombroso, ya que esto se puede cambiar en cualquier momento más tarde. Si lo desea, también puede rellenar algunos campos más haciendo clic en Avanzado. Pero una vez más usted puede llenar esa información fácilmente más tarde.
Ahora mueva el archivo zip a la carpeta wp-content/theme de su versión de desarrollo local de WordPress. (Puede leer más sobre el uso de Local para crear un entorno de desarrollo local aquí.)
Resumen contenido
¿No estás muy familiarizado con el funcionamiento de WordPress?
Ahora es un buen momento para familiarizarse con las diferentes partes funcionales de WordPress. Hemos cubierto algunos de los conceptos básicos aquí, en la primera parte de una serie sobre la creación de un tema de WordPress desde cero. Pero también puedes buscar todo lo que no conoces en el códice de WordPress o en el manual del desarrollador a medida que avanzas.
Los archivos principales en los guiones bajos
Como puede ver después de extraer, hay bastantes archivos incluidos en el tema de inicio Subraya. Vamos a examinar más de cerca los más importantes para hacer cambios significativos en el tema, y cómo hacerlo.
Encabezado.php
Echemos un vistazo al código del archivo header.php
:<?php /** * El encabezado de nuestro tema * * * Esta es la plantilla que muestra toda la sección <head> y todo hasta <div id=»content;> * * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials * * @package That_Theme */ ?><!doctype html> <?docml <?php language_attributes(); ?>> http://gmpg. DIFUNDE LA PALABRA-org/xfn/11″> <?php wp_head(); ?> <?head> <?body <?php body_class(); ?>> <div id===»page page=»page=» class=»site==»site=»>a class==»>»skip-link screen-reader-text» href=»#content=»><?
p
hp esc_html_e(‘Skip to content’,’that-theme’); ?></a> <header id=»masthead=»class==»site-header=»> <div class=»<«site-branding»>?php the_custom_logo(); if ( is_front_page() && is_home()) : ?> <h1 class=»site-title;><a href=»<?php echo esc_url((‘home_url( « /’) ); ?>»home=»home»><?php bloginfo(‘nombre’); ?></a></h1> <?php else : ?> <a href=»<?php echo esc_url( home_url(‘/»); ?>=»home_url(‘home’);?php bloginfo(‘nombre’); ?</a> <?php endif; $descripción = get_bloginfo( ‘description’, ‘display’); si (‘$descripción || is_customize_preview()) : ?> <?php echo $descripción; /* WPCS: xss ok. */ Subtítulos por aRGENTeaMphp esc_html_e( N-‘Menú principal’,’ese tema’); ?></botón> <?php wp_nav_menu( array(‘theme_location’ =>’menú-1′,’menú_id’ =>’menú-principal’, ) ); ?> </nav> <!– #navigation del sitio –> </header> <!– #masthead –> <div id=»content=»class=»site-content=»> Como
puedes ver, aparte del comentario extenso en la parte superior, es muy básico de WordPress. Todas las cosas que se pueden esperar de un tema inicial.
En general no hay mucho con lo que perder el tiempo aquí, ya que es la primera vez que empiezas. Por supuesto, todavía hay algunas cosas que puedes editar en el encabezado; por ejemplo, puedes añadir una
Si desea añadir la función de cabecera a los guiones bajos, debe llamar a la función_custom_header_markup(); función si desea tener la opción de una cabecera de vídeo, o sólo la_custom_header(); si sólo desea admitir imágenes. Probablemente querrá incluirlo encima del logotipo en la primera línea después de que se abra la división de marca del sitio. Así
:<div id=»site-branding»> <?php the_custom_header_markup(); ?> Obviamente
hay otras cosas que puedes cambiar, pero en su mayor parte, los subrayados vienen con un archivo de cabecera bastante completo.
Pie de página.php
</Subtítulos por aRGENTeaM https://wordpress.org/ %s: Nombre CMS, es decir, WordPress. */ DIFUNDE LA PALABRA- 1: Nombre del tema, 2: Autor del tema. */ https://YOURURL.com/ DIFUNDE LA PALABRA— #colophon –> </div> <!– #page –> <?php wp_footer(); ?> </body> </html> En los guiones bajos, básicamente lo
único que hace el pie de página es acreditar WordPress y el tema. (También permite la traducción, lo que hace que el código sea un poco diferente de lo que podría haber visto antes.)
Una de las cosas que podrías querer hacer aquí, es incluir un área de widgets para patrocinadores, u otras cosas, añadir una declaración de derechos de autor, o cosas por el estilo.
Si quieres añadir un área de widgets, puedes añadir directamente la función de barra_dinámica junto con cualquier divs con el que quieras envolverlo en tu archivo footer.php como so
:<div id===»footer-widget-area;> <?php dynamic_sidebar( ‘NAME-OF-WIDGET_AREA»); ?></O bien,
cree un archivo de barra lateral separado, por ejemplo sidebar-footer.php donde incluya ese código, y luego llámelo al pie de página de la forma siguiente:<?php get_sidebar
(<
?php get_sidebar
(‘footer¡’); ?>
Pero aún así, es algo bastante estándar y directo.
Funciones.php
El archivo de funciones es un poco largo para incluir línea por línea en este tutorial, pero afortunadamente está bien comentado y es fácil de entender.
Si alguna vez has trabajado con temas de WordPress, deberías ser capaz de encontrar fácilmente tu camino.
Observe que los guiones bajos son bastante ligeros en las funciones de tema personalizadas que se pueden habilitar fácilmente usando add_theme_support. Por ejemplo, la función de cabecera no se ha activado. Si desea habilitar el encabezado con la capacidad de vídeo, puede añadir este fragmento dentro de la función THEMENAME_setup()
add_theme_support( ‘custom-header’, array( ‘video’ => true));
Si ha decidido incluir un área de widgets en el pie de página, también tendrá que crear otro widget aquí.
Basta con mirar la función register_sidebar() y crear otra con información diferente que coincida con lo que quieres de tu barra lateral. Por ejemplo:
register_sidebar( array( ‘nombre’ => esc_html__( ‘Área de patrocinio de pie de página»,’ese tema’),’id’ =>’sidebar-footer’,’description’ => esc_html__( ‘Añadir patrocinadores aquí’.
DIFUNDE LA PALABRA- Antes del título =>’,»Antes del título» =>’ <h2 class=»widget-title»,»Después del título» =>’Después del título’,»Después del título»,»
Si es necesario, puedes leer más acerca de las funciones. php y WordPress en el codex.
Barra lateral.php
si (! is_active_sidebar( ‘sidebar-1’) ) { retorno; } En este caso, se trata de una sentencia muy sencilla, una sentencia
en la que se describe lo que hay que hacer si no hay barra lateral y la propia barra lateral.
En la mayoría de los casos, no es necesario editar este archivo.
Index.php
get_header(); ?> <div id=»primary=»primary=»class=»content-area»> <main id=»main=»main=»class=»>»site-main=»>main=»>?php if ( have_posts()) : if ( is_home() && ! is_front_page()) ?> Encabezado> <h1 class=»pagetitle screen-reader-text;><?php single_post_title(); ?></h1> </header> <?php endif; /* Inicie el Loop */ mientras ( have_posts()) : the_post(); /* * Incluya la plantilla Post-Format-specific para el contenido. * Si desea anular esto en un tema hijo, incluya un archivo * llamado content-___.php (donde ___ es el nombre del formato de publicación) y que se utilizará en su lugar. */ get_template_part( ‘template-parts/content’, get_post_format()); endwhile; the_posts_navigation(); else : get_template_part( ‘template-parts/content;’, ‘none;’); endif; ?>
Como puede ver, Subrayado usa partes de plantillas en el bucle. Esto significa que si desea realizar diseños separados para el contenido de vídeo o galerías, no necesita enredarse con el archivo index.php en absoluto, sólo necesita crear un archivo content-gallery.php o content-video.php.
También puedes hacer exactamente lo mismo con los tipos de mensajes personalizados que quieras añadir. Veamos la disposición básica del contenido de los mensajes:
Content.php
<artículo id=»post-<?php the_ID(); ?>» <?php post_class(); ?>> <header class=»entryy-header»> <?php if ( is_singular()) : the_title( ‘ <h1 class=»entry-title\\, ‘entryy-title’, ‘</h1> ‘ ); else : the_title(‘ <h2 class=»entry-title»><a href==»«’ . esc_url( get_permalink() . DIFUNDE LA PALABRA— .entry-meta –> <?php endif; ?> </header> <!– — .entry-header –> <?php the_content( sprintf( wp_kses( /* translators: %s: Nombre del puesto actual. Sólo visible para los lectores de pantalla */ __(‘Continue reading<span class=»screen-reader-text»>»%s»</span>’,’that-theme»), array(‘span’ => array( ‘class’ => array(), ), ) ), get_the_title() ); wp_link_pages( array( ‘before» => «`link_pages((‘array(‘before» => ««`page class=>»page-links=»>»). esc_html__((‘Páginas:«, «ese tema«, «después« => «/div> «, ) ); ?> </div> <!«.entry-content –> <pie class=»entryy-footer!> <?php that_theme_entry_footer(); ?> </footer> <!– .entryy-footer –> </article> <!– #post-<?php the_ID(); ?>
Los guiones bajos no incluyen la imagen destacada de forma predeterminada, así que si quieres incluirla en tu tema, sólo tienes que añadir la función de miniaturas_de_posturas en algún lugar por encima o por debajo de la cabecera de la entrada, envuelta a tu gusto.
Podría verse así:</header> <div class=»entry-thumbnail»><?php the_post_thumbnail(); ?></div> Como puedes ver, Subrayado usa una función de tema personalizado para mostrar la fecha en que algo fue publicado, así que si quieres editar esa parte, necesitas ir al archivo inc/template-tags.php.
Cambiar el diseño de los guiones bajos
En general, la funcionalidad básica incluida en los Subrayados suele ser muy útil para la mayoría de los proyectos de sitios web básicos. Lo que significa que para proyectos sencillos, nos salimos con la nuestra simplemente cambiando el CSS.
Estilo.css
La mayor parte de la carne de los estilos en el archivo style.css trata de márgenes y aplica estilos genéricos a diferentes tipos de contenido como botones, etc.
Cosas como las cabeceras de entrada, las áreas de widgets, el área de cabecera, se dejan prácticamente intactas. Esto significa que puedes estilizarlos fácilmente usando los selectores correctos.
Pero algunas cosas son un poco más complicadas.
Menú
El menú ya tiene bastante estilo para, por ejemplo, ocultar los elementos hijo hasta que el padre se cierne sobre él, e incluso hay una función jquery para añadir un botón de conmutación en las pantallas más pequeñas. Sin embargo, este botón sin estilo no se ve muy bien. Es sólo un botón genérico colgado a la izquierda:
Así que probablemente deberías estilizarlo para que se ajuste a tu diseño. Puede cambiar el estilo de dicho botón usando el selector de clase.menu-toggle, pero necesita envolverlo en una consulta multimedia, ya que está configurado para mostrar:none; por defecto.
Si ha elegido cambiar el color de fondo del área del encabezado, puede, por ejemplo, hacer que el fondo del botón sea transparente con un borde sólido. Con un poco de extras añadidos, así es como podría verse el código:
@media screen y (max-width: 37.5em) {.menu-toggle:hover { background-color: #000; } .menu-toggle { float: middle; width: 90%; margin-right: auto; margin: 5%; background-color: transparent; -moz-border-radius: 4px; -webkit-border-radius: 4px; radio de la frontera: 4px; borde: 1px sólido #FFF; display: bloque en línea; cursor: puntero; color: #fff; tamaño de fuente: 17px; relleno: 1em 2em; }
Y el resultado:
Obviamente puedes ir en otras direcciones con el diseño, pero este es un ejemplo de lo que puedes hacer en sólo unas pocas líneas de CSS.
Puntos de ruptura para un diseño sensible
El único punto de interrupción incluido en la hoja de estilos por defecto es el punto de interrupción 37.5em para mostrar el botón de conmutación para el menú. Puede elegir entre trabajar con este breakpoint o modificarlo y trabajar con los que está acostumbrado. Si es un principiante y no tiene un conjunto de puntos de interrupción que utilice, puede predeterminar otros más extendidos como los puntos de interrupción de arranque.
Layouts
Los guiones bajos vienen con dos opciones de diseño que no están en cola de forma predeterminada, la barra de contenido y el contenido de la barra lateral. (Significa barra lateral a la derecha y barra lateral a la izquierda.)
Debido a que el código no responde, es más un ejemplo que muestra cómo dividir el contenido en 75% de contenido y 25% de barra lateral, que una implementación perfecta del mismo.
En lugar de hacer una consulta de los archivos, puede optar por incluirlos en la hoja de estilo envuelta en las consultas de medios correspondientes. Si vas a moverte primero usando consultas bootstrap, puedes usar esto
@media only screen y (min-width : 992px) {
.content area { float: left; margin: 0 -25% 0 0; width: 100%;
}
.site-main {
margin: 0 25% 0 0;
}
.site-content .widget-area {
float: right; overflow: hidden; width: 25%;
}
.site-footer {
clear: both; width: 100%;
}
Si estás diseñando a todo lo ancho primero, incluirías el código que establece la barra lateral y el área de contenido al 100% en una consulta de ancho máximo, y luego tendrías ese código fuera de las consultas de medios.
Conclusión
Subrayado es un tema inicial muy organizado y bien comentado que es ideal para que cualquier principiante trabaje con él. Esperamos que estos pocos consejos le ayuden a crear su propio tema asombroso usando guiones bajos.
Si tiene alguna pregunta o comentario sobre esta entrada, por favor déjelo a continuación.
2TU5PDV