homefinance blog
WordPress ocupa un gran porcentaje de sitios web en el mundo, que representa el 37% de todos los sitios en línea. Aunque hay muchas razones y factores para este éxito, una de las principales razones es la popularidad de las funciones disponibles para todos los usuarios. Arañas, temas, publicaciones, páginas, categorías, taxonomías, roles de usuario y gestión de medios solo, por nombrar algunos. Para aprovechar al máximo WordPress, es aconsejable estudiar y aprender a usar todas estas funciones. En este blog, enfocaremos y discutiremos los temas de WordPress y lo guiaremos a través de los elementos básicos que necesita para crear un tema personalizado de WordPress.
¿Qué es un tema personalizado? Todo lo que está en el front-end de su sitio se enrolla y controla usando algo llamado “tema”. El tema de un sitio web es responsable del diseño y la funcionalidad específicos del sitio. Puede consultar el depósito de temas de WordPress o Themeforest para ver ejemplos de temas; Aquí encontrará miles de temas para explorar y descargar. Aunque los temas consagrados de WordPress son excelentes, si tiene la capacidad y la necesidad, es posible que desee crear su propio tema personalizado para un cliente, para usted o presentarse en los mercados con la intención de venderlo. Al crear un tema comercial, deberá seguir las guías de mercado para codificar estándares, archivos y carpetas, etc. Puede encontrar más detalles sobre estas instrucciones en los sitios web del mercado.
En este blog, pasaremos por un tutorial para mostrarle una presentación general básica sobre cómo crear su propio tema de WordPress, cubriendo todos los elementos básicos y los pasos asociados con el proceso. Cree un tema de WordPress personalizado que los temas de WordPress se creen con archivos de plantilla, scripts, estilos, imágenes, etc. Para continuar, debe tener conocimiento práctico sobre PHP, HTML y CSS, que son necesarios para construir un tema personalizado. La comprensión de JavaScript también puede ser una ventaja adicional. Para comenzar, primero llamaremos al tema “ascendente”. Cree una carpeta llamada “Updraft” dentro de WP-Content/Temas. En esta carpeta “Updraft”, escribirá el código relacionado con el tema, almacenará archivos, imágenes, fuentes, etc.
style.css
index.php
funciones.php
Style.css será el archivo principal de la hoja de estilo y puede agregar todo su CSS a este archivo. Tenga en cuenta que debe incluir un encabezado de información del tema. El encabezado debe parecer similar al formato a continuación y estar en la parte superior del estilo.css. /* Nombre del tema: Updraft Tema Uri: https://updraftplus.com Autor: Updraftplus Autor: https://upraftplus.com Descripción: El tema personalizado creado para el sitio web. Versión: 1.0 Licencias: GNU Licencias públicas generales V2 o licencias posteriores: http://www.gnu.org/licenses/gpl-2.0.html Dominio de texto: updraft */luego vaya a la apariencia, donde verá el tema enumerado . Activarlo. Al verificar la interfaz de su sitio, mostrará una pantalla vacía, porque no he agregado nada al tema.
No olvide almacenar sus imágenes, scripts y estilos en el directorio de temas. El Director de Tema se refiere a la carpeta “WP-Content/Temas/Updraft”. Asegúrese de mantenerlos organizados utilizando una buena estructura plegable, creando carpetas específicas para imágenes, scripts y estilos; Copie los archivos a ese directorio. Función function function.php es el archivo que puede agregar código para diferentes propósitos. Este archivo se carga automáticamente durante la inicialización de WordPress, con el código escrito automáticamente. Las siguientes operaciones en el archivo Functions.php generalmente se realizan en este orden: coloque las hojas de estilo y los scripts de temas (agregue los archivos JS y CSS en el sitio).
Active las barras laterales, navegando menús, post miniaturas, etc.
Defina las funciones utilizadas en toda la aplicación.
y así
El usuario puede agregar sus estilos y scripts del archivo Fun.php, de la siguiente manera. Consulte el siguiente enlace para obtener más documentos. La función incluye_js_css () {wp_register_style (“bootstrap”, get_stylesheet_directory_uri (/styles/bootstrap.min.css “, array, falso,” all “); wp_enqueue_style (“bootstrap”); wp_register_cript (‘bootstrap’, get_stylesheet_directory_uri (). ‘/scripts/bootstrap.min.js’, array (), falso, true); wp_enqueue_script (‘bootstrap’); } add_action (‘wp_enqueue_scripts’, ‘Incluye_js_css’); La función get_stylesheet_diripority_ri () ofrece una forma relativa del director de tema activo. El resto del código puede verse como el camino de los activos.
Del mismo modo, para agregar menús de navegación, post miniaturas: función updraft_theme_setup () {add_theme_support (‘post-thumbnails’); register_nav_menus (array (‘primario’ => __ (‘menú primario’), ‘footer1 =’ => __ (‘Menú de pies de página’), ‘Shop’ => __ (‘Menú de la página de taller’),)); } add_action (‘after_setup_theme’, ‘updraft_theme_setup’); Luego acceda al tablero de WordPress y agregue una publicación o página. Debería ver la sección “Imagen recomendada”. Además, en términos de >> menús, encontrará el menú principal y el menú del sótano en administración. Estas son solo algunas de las características básicas que puede cubrir mientras usa el archivo “función”. Hay muchos otros que puede agregar a este archivo si lo desea. Archivos Templon Al construir el tema, los archivos de plantilla se pueden usar para afectar la apariencia y el diseño de diferentes partes de su sitio. Por ejemplo, usaría la plantilla de encabezado.php para crear un encabezado o plantilla para incluir comentarios en el sitio. Los archivos de plantilla tienen extensión .php. Debido a que son archivos PHP, todas las páginas salen como HTML. Usando plantillas, los desarrolladores pueden distribuir el código entre varios archivos. A continuación se presentan algunos de los archivos en cuestión.
index.php: la plantilla principal. Este archivo debe ser responsable de publicar publicaciones. Al configurar la página de publicaciones desde la configuración >> lectura, se ejecuta esta plantilla.
Page.php: Esta plantilla es responsable de reproducir sus páginas. Esta configuración se puede reemplazar asignando una plantilla de página personalizada a páginas individuales.
Single.php: se usa cuando se interroga una publicación.header.php: Agregue la parte del encabezado a esta plantilla.
Fuente.php: Agregue el lado del sótano a esta plantilla.
Barra lateral.php: agregue widgets a esta plantilla.
Obtenga una lista de todos los archivos de plantilla disponibles aquí.
Página Plantillas personalizadas De forma predeterminada, todas sus páginas son representadas por la plantilla Page.php. Pero en la práctica, a veces tienes que mostrar flujos separados en diferentes páginas. En este escenario, se recomienda utilizar 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, debe crear un archivo Career.php en el directorio y colocar el comentario a continuación en la parte superior del archivo. <? Php / * Nombre de la plantilla: carrera * / Luego, acceda a la sección de edición de la página y asigne esta plantilla de "carrera" en el cuadro de atributo de páginas.
Ahora, cuando visite la página de carrera, el código de Career.php se ejecutará. Archivar su sitio web tendrá un encabezado común en todas las páginas. Puede colocar este encabezado común en el encabezado.php. El código de encabezado será así: > <? php wp_body_open (); ?
Wp_head (): este método inserta elementos cruciales en su documento, por ejemplo, scripts, estilos y meta-ethics.body_class (): esto agregará diferentes clases al elemento del cuerpo.
Wp_body_open (): se usa para ingresar el código inmediatamente después de abrir la etiqueta del cuerpo.Un ejemplo a este respecto sería el script de Google Analytics.
Los menús se pueden agregar dinámicamente mediante la función wp_nav_men (). Suponiendo que primero creó un menú en términos de >> menús y asignó su ubicación “primaria”. El siguiente código genera los elementos del menú dinámicamente. primario ‘,’ contenedor_class ‘=>’ menus ‘,)); ? Subsol -Similar el archivo del sótano en el archivo de encabezado, su código de sótano común ingresará a la plantilla Footer.php. esc_html __ (home sidebar ‘),’ id => lateral-1 ‘,’ descripción ‘=> esc_html __ (‘ Agregar widgets aquí para aparecer en su barra lateral ‘. ), ‘antes_widget’ => ‘
‘, ‘after_widget’ => ‘
‘,’ before_itle ‘=>’
‘,’ after_title => ‘
,)); } add_action (‘widgets_init’, ‘updraft_widgets_init’); Luego vaya a la apariencia >> widgets. Aquí encontrarás la barra lateral de arriba. En este ejemplo, agregaremos algunos widgets a esta barra lateral. Para agregar esta barra lateral a la interfaz, agregue el siguiente código a la barra lateral.php. ! }? Páginas y publicaciones de retiro Como ya se mencionó, todas las páginas de WordPress se reproducen y ejecutan utilizando el código que ha escrito en el archivo Page.php, excepto las páginas de plantilla de página personalizadas. 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 presentada. <? Php get_heer (); ? ? Terminara si; ? ? ? ?
Código similar ingresará al archivo Single.php para mostrar información de publicación.Para corregir la lista Post (index.php) correctamente, además de los métodos anteriores, es posible que desee usar lo siguiente: the_catgeory (): muestra la lista de categorías para una publicación.
The_permalink (): muestra el enlace permanente para la publicación actual.
The_excerpt (): muestra el fragmento de publicación.
I18N Para temas personalizados de WordPress mientras construye un tema personalizado, trate de recordar que debe desarrollarse de manera que apoye la internacionalización. Al hacer esto, hace posible que su tema se traduzca fácilmente a otros idiomas. Para agregar soporte i18n, no olvide usar un área de texto desde el cual puede analizar los archivos de origen y desde el cual puede extraer cadenas traducibles. En este ejemplo, usamos el campo de texto "ascendente", pero puede elegir cualquier identificador único. Podemos definir el dominio del texto de la siguiente manera. Function i18n_setup () {load_theme_textdomain ('updraft', get_stylesheet_directory (). '/Idiomas); } add_action ('after_setup_theme', 'i18n_setup'); Ahora, siempre que use cadenas estáticas en sus archivos de tema, incluya las funciones __ () o _e ().
