Wordpress

•▷ Tutorial starter theme Underscores (_s) 2020

Por 29/11/2020enero 10th, 2021Comentarios no habilitados

Contenidos

Para alguien que quiere tener acceso en el desarrollo de WordPress, saber por dónde comenzar ya puede ser difícil. En un post anterior, cubrimos 8 temas y marcos de trabajo iniciales que podrían ser una buena elección.

En este tutorial veremos cómo comenzar a trabajar con los Subrayados, la primera opción de consenso para desarrolladores principiantes.

En primer lugar, vamos a comenzar por descargar los guiones bajos. Antes de descargarlo, le pedirá que ponga un nombre para su tema.

No necesitas pensar en nada demasiado asombroso, puesto que esto se puede cambiar en cualquier momento más tarde. Si lo desea, además 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í.)

¿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 además 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 posteriormente de extraer, hay bastantes archivos incluidos en el tema de inicio Subraya. Vamos a evaluar 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;> * * @enlace 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 inmenso en la parte de arriba, 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í, puesto que es la primera vez que empiezas. De todos modos, aún 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á incorporarlo encima del logotipo en la primera línea posteriormente de que se abra la división de marca del sitio. Así
:<div id=»site-branding»> <?php the_custom_header_markup(); ?> Por lo visto
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, simplemente lo
único que hace el pie de página es acreditar WordPress y el tema. (Además permite la traducción, lo que hace que el código sea un poco distinto 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 necesitas añadir un área de widgets, puedes añadir de forma directa 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 posteriormente llámelo al pie de página de la forma siguiente:<?php get_sidebar
(<
?php get_sidebar
(‘footer¡’); ?>

Pero a pesar de ello, 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 en algún momento has trabajado con temas de WordPress, deberías ser capaz de hallar fácilmente tu camino.

Observe que los guiones bajos son bastante ligeros en las funciones de tema personalizadas que se pueden habilitar fácilmente utilizando 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 decidió incluir un área de widgets en el pie de página, además tendrá que crear otro widget aquí.

Quizás te interesa >>>  Uso de Markdown con WordPress: una guía para principiantes

Basta con mirar la función register_sidebar() y crear otra con información distinto que coincida con lo que pretendes 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»,»Posteriormente del título» =>’Posteriormente del título’,»Posteriormente del título»,»

Si hace falta, puedes leer más con relación a las funciones. php y WordPress en el codex.

Barra lateral.php

si (! is_active_sidebar( ‘sidebar-1’) ) { retorno; } En esta circunstancia, consiste en 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 hace falta 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 Artículo-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 utiliza 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 requiere enredarse con el archivo index.php en absoluto, sólo requiere crear un archivo content-gallery.php o content-video.php.

Además puedes hacer precisamente 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

<post 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«, «posteriormente« => «/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 manera predeterminada, por lo tanto si necesitas incluirla en tu tema, sólo debes de 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 utiliza una función de tema personalizado para mostrar la fecha en que algo fue difundido, por lo tanto si necesitas editar esa parte, necesitas ir al archivo inc/template-tags.php.

Cambiar el diseño de los guiones bajos

How to Work With Underscores As A Beginner WP Developer - Unstyled

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 básicamente 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 utilizando los selectores correctos.

Pero algunas cosas son un poco más complicadas.

El menú ya tiene bastante estilo para, por ejemplo, esconder los items hijo hasta que el padre se cierne sobre él, e inclusive hay una función jquery para añadir un botón de conmutación en las pantallas más pequeñas. A pesar de todo, este botón sin estilo no se ve muy bien. Es sólo un botón genérico colgado a la izquierda:

How To Work With Underscores As a Beginner WP Developer - Unstyled Menu Button

Por lo tanto probablemente deberías estilizarlo para que se ajuste a tu diseño. Puede cambiar el estilo de dicho botón utilizando el selector de clase.menu-toggle, pero requiere envolverlo en una consulta multimedia, puesto que está configurado para mostrar:none; por defecto.

Si ha seleccionado 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:

Por lo visto 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 seleccionar entre trabajar con este breakpoint o modificarlo y trabajar con los que está acostumbrado. Si es un principiante y no tiene un recopilatorio 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 manera 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 vez 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 utilizando consultas bootstrap, puedes utilizar 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 define la barra lateral y el área de contenido al 100% en una consulta de ancho máximo, y posteriormente 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 utilizando guiones bajos.

Si tiene alguna duda o comentario sobre esta entrada, por favor déjelo a continuación.

2TU5PDV

error: Atención: Contenido protegido.