Saltar al contenido

Cómo comenzar a trabajar con guiones bajos (_s) como desarrollador principiante de WP

How To Start Working With Underscores (_s) As A Beginner WP Developer

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 inicio que podrían ser una buena opción. En este tutorial repasaremos cómo comenzar a trabajar con Underscores, la primera elección de consenso para desarrolladores principiantes.

En primer lugar, comenzaremos obviamente descargando subrayados. Antes de descargarlo, le pedirá que ponga un nombre para su tema. No necesita pensar en nada demasiado sorprendente, ya que esto se puede cambiar en cualquier momento posterior. Si lo desea, también puede completar algunos campos más haciendo clic en avanzado. Pero nuevamente puede completar esa información fácilmente más adelante.

Ahora mueva, extraiga el archivo zip en la carpeta wp-content / theme de su versión de desarrollo local de WordPress. (Puede leer más sobre el uso de Local para configurar un entorno de desarrollo local aquí).

¿No está muy familiarizado con cómo funciona realmente WordPress?

Ahora es un buen momento para familiarizarse con las diferentes partes de trabajo de WordPress. Hemos cubierto algunos de los conceptos básicos aquí, en la primera parte de una serie sobre cómo crear un tema de WordPress desde cero. Pero también puede buscar todo lo que no le resulte familiar en el codex de WordPress o en el manual de desarrolladores a medida que avanza.

Los archivos principales en guiones bajos

Como puede ver después de extraer, hay bastantes archivos incluidos en el tema de inicio de subrayado. Vamos a echar un vistazo más de cerca a los más importantes para realizar cambios significativos en el tema, y ​​cómo hacerlo.

Header.php

Echemos un vistazo al código en el archivo header.php:

 section and everything up until 
* * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials * * @package That_Theme */ ?> > >

Como puede ver, aparte del extenso comentario en la parte superior, es WordPress muy básico. Todas las cosas que esperarías de un tema de inicio para construir.

En general, no hay mucho con lo que jugar aquí, ya que estás comenzando. Por supuesto, todavía hay algunas cosas que puede editar en el encabezado; por ejemplo, puede agregar una etiqueta envuelta alrededor del logotipo y agregar la opción para cambiar el enlace desde el personalizador.

Si desea agregar la función de encabezado a los guiones bajos, debe llamar a the_custom_header_markup (); funciona si quieres tener la opción de un encabezado de video, o simplemente the_custom_header (); si solo quieres soportar imágenes. Probablemente desee incluirlo encima del logotipo en la primera línea después de abrir el div de marca del sitio. Me gusta esto:

Obviamente, hay otras cosas que puede cambiar, pero en su mayor parte, los guiones bajos vienen con un archivo de encabezado bastante completo.

Footer.php

"> |

En 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 puede hacer aquí es incluir un área de widgets para patrocinadores u otras cosas, agregar una declaración de copyright o cosas similares.

Si desea agregar un área de widgets, puede agregar directamente la función dynamic_sidebar junto con cualquier divs que desee incluir en su archivo footer.php de la siguiente manera:

	


O cree un archivo de barra lateral separado, por ejemplo, sidebar-footer.php donde incluya ese código, y luego instálelo en el pie de página de esta manera:

Pero sigue siendo bastante estándar, cosas sencillas.

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 antes, deberías poder orientarte fácilmente.

Tenga en cuenta que los guiones bajos son bastante claros en las funciones de temas personalizados que se pueden habilitar fácilmente con add_theme_support. Por ejemplo, la función de encabezado no se ha habilitado. Si desea habilitar el encabezado con capacidad para video, puede agregar este fragmento dentro de la función THEMENAME_setup ():

add_theme_support( 'custom-header', array(
  'video' => true
));

Si decidió incluir un área de widgets en su pie de página, también deberá crear otro widget aquí.

Simplemente mire la función register_sidebar () y cree otra con información diferente que coincida con lo que desea de su barra lateral. Por ejemplo:

register_sidebar( array(
		'name'          => esc_html__( 'Footer sponsor area', 'that-theme' ),
		'id'            => 'sidebar-footer',
		'description'   => esc_html__( 'Add sponsors here.', 'that-theme' ),
		'before_widget' => '
', 'after_widget' => '
', 'before_title' => '

', 'after_title' => '

', ) );

Si es necesario, puede leer más sobre el archivo functions.php y las funciones de WordPress en el códice.

Sidebar.php

if ( ! is_active_sidebar( 'sidebar-1' ) ) {
	return;
}
?>





Muy simple, una declaración que resume qué hacer si no hay una barra lateral y la barra lateral en sí.

En su mayor parte, no es necesario editar este archivo.

Index.php

get_header(); ?>

	

Como puede ver, el subrayado utiliza partes de plantilla en el bucle. Esto significa que si desea hacer diseños separados para el contenido de video o galerías, no necesita meterse con el archivo index.php, solo necesita hacer un content-gallery.php o content-video.php archivo. También puede hacer exactamente lo mismo para los tipos de publicaciones personalizadas que desee agregar. Veamos el diseño de contenido básico para las publicaciones:

Content.php

>
', ' ' ); else : the_title( '

', '

' ); endif; if ( 'post' === get_post_type() ) : ?>
"%s"', 'that-theme' ), array( 'span' => array( 'class' => array(), ), ) ), get_the_title() ) ); wp_link_pages( array( 'before' => ' ', ) ); ?>

Los guiones bajos no incluyen la imagen destacada de manera predeterminada, por lo que si desea incluir eso en su tema, simplemente agregue la función post_thumbnail en algún lugar sobre el encabezado de entrada o debajo de él, envuelto como desee. Podría verse así:




Como puede ver, Underscores utiliza una función de tema personalizado para mostrar la fecha en que se publicó algo, por lo que si desea editar esa parte, debe dirigirse al archivo inc / template-tags.php.

Cambio del diseño de guiones bajos

Cómo trabajar con guiones bajos como desarrollador principiante de WP: sin estiloEn general, la funcionalidad básica incluida en el subrayado suele ser muy útil para la mayoría de los proyectos básicos de sitios web. Lo que significa que para proyectos simples, podemos salirse con solo cambiar el CSS.

Style.css

La mayor parte de la carne de los estilos en el archivo style.css trata con márgenes y aplica estilos genéricos a diferentes tipos de contenido como botones, etc.

Cosas como los encabezados de entrada, áreas de widgets, área de encabezado, se dejan en gran medida intactos. Esto significa que puede diseñarlos fácilmente simplemente usando los selectores correctos.

Pero algunas cosas son un poco más complicadas.

Menú

El menú ya tiene un estilo bastante, por ejemplo, para ocultar elementos secundarios hasta que se pasa el cursor por encima, e incluso hay una función jquery para agregar un botón de alternar en pantallas más pequeñas. Sin embargo, este botón sin estilo no se ve muy bien. Es solo un botón genérico que cuelga a la izquierda:

Cómo trabajar con guiones bajos como desarrollador principiante de WP: botón de menú sin estilo

Por lo tanto, probablemente debería diseñarlo para que se ajuste a su diseño. Puede diseñar dicho botón utilizando el selector de clase .menu-toggle, pero debe ajustarlo en una consulta de medios, ya que está configurado para mostrar: ninguno; por defecto.

Si ha elegido cambiar el color de fondo del área del encabezado, podría, 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 ese código:

@media screen and (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;
    border-radius: 4px;
    border: 1px solid #FFF;
    display: inline-block;
    cursor: pointer;
    color: #fff;
    font-size: 17px;
    padding: 1em 2em;
}
}

Y el resultado:

Cómo trabajar con guiones bajos como desarrollador principiante de WP: botón de menú con estilo

Obviamente, puede ir a otras direcciones con el diseño, pero este es un ejemplo de lo que puede hacer en solo unas pocas líneas de CSS.

Puntos de interrupción para un diseño receptivo

El único punto de interrupción incluido en la hoja de estilo por defecto es el punto de interrupción de 37.5em para mostrar el botón de alternar para el menú. Puede elegir trabajar con este punto de interrupción, o cambiarlo y trabajar con los que está acostumbrado. Si eres un principiante y no tienes un conjunto de puntos de interrupción que utilizas, puedes usar uno predeterminado como los puntos de interrupción de arranque.

Diseños

Los caracteres de subrayado vienen con dos opciones de diseño que no están en cola por defecto, contenido de la barra lateral y contenido de la barra lateral. (Significado 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 poner en cola los archivos, puede optar por incluirlos en la hoja de estilo envuelta en las consultas de medios apropiadas. Si primero vas a usar dispositivos móviles usando consultas de arranque, puedes usar esto:

@media only screen and (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 primero diseña el ancho completo, debe incluir el código que establece la barra lateral y el área de contenido al 100% en una consulta de ancho máximo, y luego tiene ese código fuera de las consultas de medios.

Conclusión

El subrayado es un tema de inicio muy organizado y bien comentado que es ideal para cualquier principiante. Esperamos que estos pocos consejos te ayuden a crear tu propio tema increíble con subrayados.

Si tiene alguna pregunta o comentario sobre esta publicación, déjela a continuación.

Artículos Relacionados