Cómo crear un tema personalizado de WordPress

Publicado: 2021-08-06

WordPress ocupa un gran porcentaje de los sitios web del mundo, representando el 37% de todos los sitios actualmente en línea. Si bien hay muchas razones y factores para este éxito, una de las razones principales es la popularidad de las funciones disponibles para todos los usuarios. Complementos, temas, publicaciones, páginas, categorías, taxonomías, roles de usuario y manejo de medios, solo por nombrar algunos. Para aprovechar al máximo WordPress, se recomienda que los usuarios estudien y aprendan a utilizar todas estas funciones. En este blog, nos enfocaremos y discutiremos los temas de WordPress y lo guiaremos a través de los conceptos básicos necesarios sobre cómo crear un tema personalizado de WordPress.

¿Qué es un tema personalizado?

Todo en la interfaz de su sitio se ejecuta y controla mediante algo llamado "tema". El tema de un sitio web es responsable del diseño y la funcionalidad específicos del sitio web. Puede consultar el repositorio de temas de WordPress o Themeforest para ver ejemplos de temas; aquí encontrará miles de temas listados para que explore y descargue.

Si bien los temas establecidos de WordPress son excelentes, si tiene la capacidad y la necesidad, también puede crear su propio tema personalizado para un cliente, para usted o para enviarlo a los mercados con la intención de venderlo. Al crear un tema comercial, deberá seguir las pautas de los mercados para los estándares de codificación, la estructura de archivos y carpetas, etc. Puede encontrar más detalles sobre estas pautas en los sitios web de los mercados .

En este blog, ejecutaremos un tutorial para mostrarle una descripción general básica sobre cómo crear su propio tema de WordPress cubriendo todos los conceptos básicos y los pasos asociados con el proceso.

Crear un tema personalizado de WordPress

Los temas de WordPress se crean con archivos de plantilla, scripts, estilos, imágenes, etc. Para continuar, debe tener conocimientos prácticos de PHP, HTML y CSS, que son necesarios para crear un tema personalizado. Comprender JavaScript también puede ser una ventaja adicional.

Para comenzar, primero nombraremos el tema 'Updraft'. Cree una carpeta llamada 'Updraft' dentro de wp-content/themes . Dentro de esta carpeta 'Updraft', escribirá el código relacionado con su tema, almacenará archivos, imágenes, fuentes, etc.

Los archivos principales del tema personalizado de WordPress son:

  • estilo.css
  • índice.php
  • funciones.php

El archivo style.css será el archivo de hoja de estilo principal y puede agregar todo su CSS en este archivo. Recuerda que debes incluir un encabezado de información sobre el tema. El encabezado debe tener un aspecto similar al siguiente formato y estar en la parte superior de style.css .

 [código]
/*
Nombre del tema: corriente ascendente
URI del tema: https://updraftplus.com
Autor: UpdraftPlus
Autor URI: https://updraftplus.com
Descripción: el tema personalizado creado para el sitio web.
Versión: 1.0
Licencia: GNU General Public License v2 o posterior
URI de licencia: http://www.gnu.org/licenses/gpl-2.0.html
Dominio de texto: corriente ascendente
*/
[/código]

A continuación, vaya a Apariencia >> Temas, donde verá su tema en la lista. Actívalo. Cuando revise la interfaz de su sitio, se mostrará una pantalla en blanco, ya que aún no hemos agregado nada al tema.

Recuerde almacenar sus imágenes, scripts y estilos en su directorio de temas. El directorio de temas se refiere a la carpeta 'wp-content/themes/Updraft'. Asegúrese de mantenerlos organizados usando una buena estructura de carpetas, creando carpetas específicas para imágenes, guiones y estilos; Copie los archivos en el directorio respectivo.

Archivo de funciones

El functions.php es el archivo donde puede agregar código para diferentes propósitos. Este archivo se carga automáticamente durante la inicialización de WordPress, y el código escrito en él se ejecuta automáticamente.

Las siguientes operaciones en el archivo functions.php se suelen realizar en este orden:

  • Ponga en cola las hojas de estilo y los scripts del tema (agregue los archivos JS y CSS al sitio web).
  • Habilite las barras laterales, los menús de navegación, las miniaturas de publicaciones, etc.
  • Defina las funciones utilizadas en toda la aplicación.
  • Etc.

El usuario puede agregar sus estilos y scripts desde el archivo functions.php de la siguiente manera. Consulte el siguiente enlace para obtener más documentación .

 [código]
función include_js_css() {
wp_register_style( "bootstrap", get_stylesheet_directory_uri() .
"/styles/bootstrap.min.css", array(), false, "all" );
wp_enqueue_style ("arranque");
wp_register_script('bootstrap', get_stylesheet_directory_uri() .
'/scripts/bootstrap.min.js', matriz(), falso, verdadero);
wp_enqueue_script('arranque');
}
add_action('wp_enqueue_scripts', 'include_js_css');
[/código]

La función get_stylesheet_directory_uri() proporciona una ruta relativa del directorio del tema activo. Se puede ver que el resto del código es la ruta de los activos.

Del mismo modo, para agregar menús de navegación, publicar miniaturas:

 [código]
función updraft_theme_setup() {
add_theme_support('post-miniaturas');
registrarse_menús_navegación(
formación(
'primario' => __( 'Menú principal' ),
'footer1=' => __( 'Menú de pie de página' ),
'tienda' => __( 'Menú de la página de la tienda' ),
)
);
}
add_action('after_setup_theme', 'updraft_theme_setup');
[/código]

A continuación, vaya al panel de control de WordPress y agregue una publicación o página. Debería ver la sección 'Imagen destacada'. Además, en Apariencia >> Menús, encontrará el Menú principal y el Menú de pie de página en Administrar ubicaciones .

Estas son solo algunas de las características básicas que puede cubrir mientras usa el archivo 'Función'. Hay mucho más que puede agregar en este archivo si así lo desea.

Archivos de plantilla

Al crear su tema, los archivos de plantilla se pueden usar para afectar el diseño y el diseño de diferentes partes de su sitio web. Por ejemplo, usaría la plantilla header.php para crear un encabezado, o la plantilla comments.php para incluir comentarios en su sitio. Los archivos de plantilla tienen una extensión .php . Como son archivos PHP, todas las páginas se muestran como HTML.

Usando plantillas, los desarrolladores pueden distribuir código entre varios archivos. A continuación se enumeran algunos de los archivos en cuestión.

  • index.php : La plantilla principal. Este archivo debe ser responsable de la lista de publicaciones. Cuando configura la página Publicaciones desde Configuración >> Lecturas , esta plantilla se ejecuta.
  • page.php : esta plantilla es responsable de representar sus páginas. Esta configuración se puede anular asignando una plantilla de página personalizada a páginas individuales.
  • single.php : se usa cuando se consulta una sola publicación.
  • header.php : agregue su parte de encabezado en esta plantilla.
  • footer.php : Agregue su parte de pie de página en esta plantilla.
  • sidebar.php : agregue widgets en esta plantilla.

Obtenga una lista de todos los archivos de plantilla disponibles aquí .

Plantillas de página personalizadas

De forma predeterminada, todas sus páginas se representan a través de la plantilla page.php . Pero en la práctica, a veces tiene que mostrar flujos separados en diferentes páginas. En este escenario, se recomienda que utilice el poder de las plantillas de página personalizadas.

Por ejemplo, si tiene una página de 'Carrera' y desea agregar su código a esta página; para lograr esto, necesitaría crear un archivo career.php en el directorio del tema y colocar el comentario a continuación en la parte superior del archivo.

 [código]
<?php
/*
Nombre de la plantilla: Carrera
*/
[/código]

A continuación, vaya a la sección de edición de la página y asigne esta plantilla de 'Carrera' debajo del cuadro Atributos de la página .

Ahora, cuando visite la página Carrera, se ejecutará el código de carrera.php .

Archivo de cabecera

Su sitio web tendrá un encabezado común en todas las páginas. Puede colocar este encabezado común en header.php . El código del encabezado será algo como esto:

 [código]
<!DOCTYPEhtml>
<html <?php atributos_idioma(); ?>>
<cabeza>
<meta juego de caracteres="<?php bloginfo('juego de caracteres'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<?php cabeza_wp(); ?>
</cabeza>
<cuerpo <?php clase_cuerpo(); ?>>
<?php wp_body_open(); ?>
<!-- tu menú -->
[/código]

En el código anterior, notará que usamos algunas funciones disponibles en WordPress.

  • wp_head() : este método inserta elementos cruciales en su documento, por ejemplo, scripts, estilos y metaetiquetas.
  • body_class() : Esto agregará diferentes clases al elemento del cuerpo.
  • wp_body_open() : se usa para insertar código inmediatamente después de abrir la etiqueta del cuerpo. Un ejemplo de esto sería el script de Google Analytics.

Los menús se pueden agregar dinámicamente a través de la función wp_nav_menu() . Suponiendo que primero ya haya creado un menú en Apariencia >> Menús y le haya asignado una ubicación 'principal'. El siguiente código genera los elementos del menú dinámicamente.

 [código]
<?php
wp_nav_menu(
formación(
'tema_ubicación' => 'principal',
'container_class' => 'menús',
)
);
?>
[/código]

Una vez que su archivo de encabezado esté configurado, use la función get_header() para incluir este archivo en sus otras plantillas.

archivo de pie de página

Similar al archivo de encabezado, su código común para el pie de página irá dentro de la plantilla footer.php .

 [código]
<!-- elementos de pie de página -->
<?php wp_footer(); ?>
</cuerpo>
</html>
[/código]

Aquí, use wp_footer() que inserta elementos, específicamente scripts, en esta ubicación. El uso de get_footer() incluirá el contenido de este archivo en otros lugares.

archivo de la barra lateral

La barra lateral es una columna vertical que se usa para mostrar información en su sitio que no se muestra en el contenido principal. Puede incluir artículos populares, banners publicitarios, un formulario de envío de boletines, etc. Las barras laterales contienen widgets que un administrador puede personalizar. La plantilla sidebar.php incluirá los widgets de su sitio.

En este ejemplo, crearemos una barra lateral básica agregando el siguiente código al archivo functions.php .

 [código]
función updraft_widgets_init() {
registrarse_barra lateral(
formación(
'nombre' => esc_html__(Barra lateral de inicio'),
'id' => 'barra lateral-1',
'descripción' => esc_html__( 'Agrega widgets aquí para que aparezcan en tu barra lateral' ),
'before_widget' => '<clase de sección="widget">',
'after_widget' => '</sección>',
'before_title' => '<h2 class="widget-title">',
'después_del_título' => '</h2>',
)
);
}
add_action( 'widgets_init', 'updraft_widgets_init' );
[/código]

A continuación, vaya a Apariencia >> Widgets . Aquí encontrará la barra lateral anterior. En este ejemplo, vamos a agregar algunos widgets a esta barra lateral. Para agregar esta barra lateral a la interfaz, agregue el siguiente código en sidebar.php.

 [código]
<div class="barra lateral">
<?php
if (is_active_sidebar('barra-lateral-1')) {
barra_lateral_dinámica('barra-lateral-1');
}
?>
</div>
[/código]

Finalmente, recuerde nombrar el método ' get_sidebar()' para que pueda incluir fácilmente la barra lateral en cualquier otra página cuando sea necesario.

Representación de páginas y publicaciones.

Como ya se mencionó, todas las páginas de WordPress se procesan y ejecutan utilizando el código que ha escrito en el archivo page.php , excepto las páginas con una plantilla de página personalizada. El siguiente código es un ejemplo que mostrará una página con el título de la página, la descripción y la imagen destacada.

 [código]
<?php
obtener_encabezado();
?>
<div class="área-de-contenido">
<clase principal="sitio-principal">
<?php
mientras ( have_posts() ) :
el cargo();
?>
<?php
si ( has_post_thumbnail() ) :
la_post_miniatura();
terminara si;
?>
<header class="entrada-encabezado">
<?php el_título(); ?>
</encabezado>
<div class="contenido-de-entrada">
<?php el_contenido(); ?>
</div>
<?php
mientras tanto;
?>
</principal>
</div>
<?php
get_footer();
[/código]

Un código similar irá dentro del archivo single.php para mostrar la información de la publicación. Para representar correctamente la lista de publicaciones (su index.php ), además de los métodos anteriores, también puede usar lo siguiente:

  • the_catgeory() : Muestra la lista de categorías de una publicación.
  • the_permalink() : Muestra el enlace permanente de la publicación actual.
  • the_excerpt() : muestra el extracto de la publicación.

I18n para temas personalizados de WordPress

Al crear un tema personalizado, intente recordar que debe desarrollarse de manera que admita la internacionalización. Al hacer esto, hace posible que su tema se traduzca fácilmente a otros idiomas.

Para agregar compatibilidad con I18n, recuerde usar un dominio de texto del que pueda analizar los archivos fuente y extraer las cadenas traducibles. En este ejemplo, estamos usando el dominio de texto 'Updraft', pero puede elegir cualquier identificador único. Podemos definir el dominio de texto de la siguiente manera.

 [código]
función i18n_setup() {
load_theme_textdomain( 'updraft', get_stylesheet_directory() . '/languages' );
}
add_action('after_setup_theme', 'i18n_setup');
[/código]

Ahora, cada vez que use cadenas estáticas en sus archivos de temas, envuélvalas dentro de las funciones __() o _e() .

 [código]
<h2><?php _e('Nombre', 'corriente ascendente]); ?></h2>
<?php echo __('Correo electrónico de usuario', 'updraft'); ?>
[/código]

Hay herramientas especiales disponibles como POEDIT que ayudan a generar archivos de idiomas traducidos. Consulte este blog para obtener más información.

Este blog ha cubierto los conceptos básicos sobre la creación de temas personalizados de WordPress. Sin embargo, es un tema muy amplio que requiere mucho tiempo y paciencia. A continuación hay algunos recursos útiles con los que debe familiarizarse y que lo ayudarán a comenzar a crear sus temas de WordPress.

  • El bucle de WordPress
  • Etiquetas de plantilla
  • Páginas de categoría
  • Función_referencia
  • Etiqueta condicional
  • Estándares de codificación de WordPress

Cuando cree un nuevo tema para su sitio de WordPress, recuerde que deberá hacer una copia de seguridad después de cada cambio o correrá el riesgo de perder todo su trabajo. Use UpdraftPlus: el complemento de copia de seguridad, restauración y clonación de WordPress líder y más confiable del mundo.

La publicación Cómo crear un tema personalizado de WordPress apareció primero en UpdraftPlus. UpdraftPlus: complemento de copia de seguridad, restauración y migración para WordPress.