WordPress se está convirtiendo rápidamente en un nombre familiar si aún no lo es. Está en todas partes, esta belleza benigna, promoviendo algunos de los mejores sitios la toile y apps web que el mundo haya visto. Es una plataforma de blogs y CMS de primer nivel que no solo es increíblemente versátil, sino al mismo tiempo increíblemente fácil de aprender y usar. ¿Por qué otra razón aumentaría la popularidad de WordPress cada día que pasa?
Pero lo que ve en la superficie cuando configura y ejecuta WordPress es solo una pequeña fracción de lo que sucede detrás de escena. De hecho, la hermosa interface utilisateur que todos amamos no es nada comparada con el caos de la actividad detrás del escenario. Lo que quiero decir es que WordPress se ejecuta en dos tecnologías web algo complicadas reconocidas como PHP y MySQL.
Otras tecnologías que juegan un papel incluyen JavaScript, su primo cercano jQuery, CSS y HTML. Los temas de WordPress (e incluso los complementos) están escritos principalmente en PHP y dependen de las bases de datos MySQL para ejecutarse. Al mismo tiempo dependen de las tecnologías web antes mencionadas. Todas estas tecnologías deben trabajar juntas.
Maintenant, en tant que débutant, vous ne comprenez peut-être pas que pour que la plate-forme, les thèmes et les plugins WordPress fonctionnent à l'unisson, les développeurs utilisent un ensemble de code standardisé, en même temps collectivement connu sous le nom de balises PHP. Ce sont ces codes que nous décrivons dans l'article d'aujourd'hui, vous montrant à quel point ils sont utiles. Nous allons insérer quelques exemples quelque part ici au cas où, alors préparez-vous à vous amuser dans votre voyage de création de thème!
Anatomie du sujet
Un tema de WordPress no es más que varios archivos PHP vinculados entre sí. Viene con un archivo de feuille de style CSS que es responsable de cómo se ve su tema (y sitio). Sin embargo, volviendo a lo básico, un tema de WordPress es simplemente un par de archivos PHP. Arriba hay una instantánea de un gran tuts + aide-mémoire pour l'anatomie d'un thème WordPress. Pour créer un thème WordPress, vous aurez besoin des fichiers suivants:
- entête.php- Ce fichier modèle contient les informations d'en-tête, qui apparaissent dans la section <
> y antes de la etiqueta de apertura . Aquí agrega métadonnées, título del sitio y relier a su hoja de estilo CSS, entre otros. - indice.php - Ceci est le modèle de corps principal de votre thème (ou site) WordPress. Son seul objectif est de rassembler les autres fichiers en les incluant à l'aide de balises de gabarit (plus d'informations sur les balises de gabarit dans un instant).
- sidebar.php – Esta es la sección de tu barra lateral. Puede colocar widgets, categorías, menús adicionales, formulario de búsqueda y cualquier otra cosa que desee
- bas de page.php – Esta es la sección de pie de página. Agregue su información de derechos de autor, enlaces RSS, widgets, enlaces, iconos sociales, etc.
- page.php - Chaque fois que vous créez une page sur votre site basé sur WordPress, c'est le modèle responsable
- single.php – Este archivo de plantilla lleva una sola publicación de Blog.
- comments.php - Le personnel responsable des commentaires
- 404.php – La plantilla que se muestra cuando su lector encuentra el infame Erreur 404 no encontrado
- search.php - Ofrece a sus lectores la oportunidad de encontrar Contenu sur votre site WordPress.
- searchform.php - Vous aurez besoin d'un formulaire de recherche pour offrir la fonctionnalité mentionnée précédemment, n'est-ce pas?
- archive.php - Parce que trouver du contenu que vous avez publié en 2008 ne devrait pas être un problème
- functions.php - Mettez toutes les fonctions spéciales et même les plugins personnalisés ici. Cependant, pour la compatibilité inter-thèmes, il est recommandé d'ajouter du code personnalisé en tant que plugins séparés. Vous pouvez ajouter des menus supplémentaires, activer des widgets et bien plus encore. Ce fichier vous donne beaucoup de puissance pour convertir votre site / thème WordPress comme vous le souhaitez.
- style.css - Ce n'est pas un fichier de modèle PHP en tant que tel. Mais c'est le fichier dans lequel vous ajoutez vos styles CSS pour contrôler l'esthétique. En même temps, il est livré avec l'en-tête d'informations pour votre thème WordPress.
Vous pouvez certainement créer un thème avec moins de modèles, mais nous ne recommandons pas d'en faire une habitude. Après tout, vous n'avez besoin que des 10 fichiers ci-dessus pour créer un thème WP standard. Treize n'est pas un grand nombre, n'est-ce pas? En termes simples, votre index.php pourrait ressembler à ceci:
<?php
// Every page will need the contents of the header.php
get_header(); ?>
// Insert main content here, include the loop
<?php
// Include your sidebar
get_sidebar(); ?>
<?php
// The footer hook is used by themes and plugins to load scripts et suivi codes
get_footer(); ?>
Passons à autre chose, parlons d'un extrait de code astucieux appelé le lien.
Le lien
En algunas de nuestras series de publicaciones anteriores, como el popular Tutorial de WordPress: Cómo crear un tema de WordPress a partir de HTML, hemos mencionado el ciclo, aunque de pasada. Entonces, ¿qué hace que el bucle être el fragmento popular que es? Bueno, sin este código especial, tendría que codificar manualmente cada publicación, junto con los extractos, en su tema de WordPress. Haría esto cada vez que publique un nuevo artículo.
L'effort et le temps que vous perdriez vous rendraient bleu et raide. L'empreinte carbone que vous laisseriez après avoir tué votre désolé entraînerait un trou de la taille de douze stades des Yankees à travers la couche d'ozone. Eh bien, j'exagère les faits (ou leur absence), mais vous deviendriez fou si vous encodiez manuellement chaque article sur votre site WordPress.
La boucle est une bouée de sauvetage. Mettez simplement l'extrait de code suivant n'importe où dans vos fichiers de modèle WordPress, et il listera tous les articles que vous avez créés:
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// Poster Content here
endwhile;
endif; ?>
Nous utilisons généralement la boucle dans index.php pour afficher une liste de messages, mais n'hésitez pas à expérimenter; ajoutez-le là où vous souhaitez inclure vos messages. Dans le même temps, ajoutez des balises HTML et PHP personnalisées dans la boucle pour personnaliser vos publications comme bon vous semble. En parlant de balises, qu'est-ce qui est disponible dans WordPress?
Inclure les balises
Les balises d'inclusion de modèle sont simplement du code PHP que vous utilisez dans n'importe quel fichier de modèle pour inclure (ou plutôt appeler) d'autres fichiers de modèle à partir de votre dossier de thème WordPress. Voici ce dont nous parlons:
- php get_header (); ?> - Utilisez ceci dans index.php pour appeler (ou inclure) le fichier header.php. Il recherchera header.php et affichera son contenu dans index.php; c'est de cela qu'il s'agit d'inclure un fichier.
- - Inclut sidebar.php
- - Inclut le fichier de modèle footer.php
- - Quiz rapide: Que pensez-vous de cette balise d'inclusion?
Modèles de balises Bloginfo
Il existe une autre catégorie de balises de modèle que nous appellerons simplement les balises bloginfo. Ils jouent un rôle, qui est de rechercher des informations sur votre site WordPress à partir de la base de données. Il s'agit principalement des informations que vous fournissez à votre site WordPress dans votre zone d'administration via le Perfil del Nom d'utilisateur y Paramètres -> Général. Une fois les informations récupérées de vos bases de données, ces balises apparaîtront de la même manière sur votre site que vous les placez.
Vous pouvez légèrement modifier la structure de bloginfo, de sorte qu'au lieu d'afficher simplement les informations récupérées, vous pouvez les utiliser (les informations) ailleurs dans votre code PHP. Comme c'est pratique? Plus sur cela dans un instant. Voici les balises bloginfo les plus courantes:
- php bloginfo ('nombre'); ?> - Cela montre le titre de votre blog / site WordPress
- - Esta etiqueta de plantilla muestra la URL de su blog.
- php bloginfo ('descripción'); ?> - Cela montre la description, ou plutôt le slogan, de votre blog.
- php bloginfo ('juego de caracteres'); ?> - Affiche le jeu de caractères utilisé pour encoder votre site. La valeur par défaut est UTF-8
- php bloginfo ('stylesheet_url'); ?> - Cela montre l'URL de la feuille de style CSS de votre thème actif
- php bloginfo ('versión'); ?> - Affiche la version de WordPress que vous utilisez
- php bloginfo ('idioma'); ?> - Afficher la langue WordPress
- php bloginfo ('rss_url'); ?> - Affiche l'URL du flux RSS 0.92
- - Affiche l'URL du flux RSS 2.0
Il y en a plusieurs autres balises bloginfo que vous pouvez utiliser pour promouvoir votre thème WordPress. Maintenant, à propos de cette petite modification de bloginfo dont nous avons parlé il y a quelques secondes. Jusqu'à présent, nous avons utilisé . Modifions ceci en: php $ bloginfo = get_bloginfo ($ show, $ filter); ?>. Permettez-moi de décomposer les paramètres:
- Spectacle $ – Esta es la Mot-clé que usa para nombrar la información que desea recuperar de la base de datos. Los ejemplos incluyen ‘nombre’, ‘URL’, ‘descripción’, ‘admin_email’, etc.
- Filtre $ - Cela vous permet uniquement de filtrer les informations récupérées. Par défaut, il est défini sur «raw», ce qui signifie simplement que la valeur de $ show est renvoyée telle quelle. Le paramétrer sur 'display' fera passer la valeur de $ show à travers la fonction wptexturize () en premier. Cependant, ne vous inquiétez pas pour le moment.
Voici un exemple: supposons que nous voulions rechercher et afficher votre slogan (description du site) qui dit "Meilleurs thèmes WordPress Premium", nous allons d'abord récupérer ces informations en utilisant cette balise ...
… Qui charge la description du site en $ site_description. Pour afficher la description de votre site sur votre site, utilisez ceci:
Cela vous donne: Leur devise est: Les meilleurs thèmes WordPress premium
Noter: Il existe de nombreux autres types de étiquettes de modèle qui vous permettent de réaliser beaucoup plus avec votre site WordPress. Ils sont classés en divers ensembles, à savoir. étiquettes générales, tags d'auteur, publier des étiquettes de vignettes, balises de catégoriey relier Étiquettes entre autres. Vous pouvez même les utiliser dans la boucle, alors oui, vous devriez vous amuser.
Feuille de style du thème
Mencionamos style.css previamente. Nuevamente, ¿por qué es importante el archivo style.css? En primer lugar, proporciona detalles sobre su tema. Esta información va al encabezado de la hoja de estilo, lo que ayuda a identificar el tema durante la selección en el área de administración. Como tal, dos temas no deben tener los mismos detalles en los en-têtes de sus hojas de estilo. A continuación, se muestra un ejemplo de un encabezado de hoja de estilo:
/*
Theme Name: Your Theme Name
Theme URI: https://www.yoursite.com/yourtheme
Author: Your Name
Author URI: https://www.yoursite.com/
Description: This WordPress theme is 100% responsive blah blah...
Version: 1.0
License: GNU General Public License V2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: gold, one-column, left-sidebar, responsive-grid, etc
Text Domain: yourthemename
*/
Ces informations apparaissent en premier (ou en haut) dans style.css. En dehors de cela, assurez-vous que:
- Poursuivre Normes d'encodage CSS
- Utilisez un CSS valide
- Réduire le CSS
- Ajouter des styles pouvant être imprimés
- Mettre en forme tous les éléments HTML
Dernières pensées
Cette feuille de triche est juste une ressource rapide pour vous aider à démarrer lorsque vous en apprenez davantage sur le développement de thèmes WordPress. Avec les balises et les extraits que nous avons partagés ici, vous pouvez rapidement développer un thème standard et l'améliorer sans vous ruiner. Bien sûr, vous devez continuer à vous renseigner sur le développement de thèmes WordPress, et pour cela nous vous recommandons le Codex WordPress, tuts +, Threehouse, et ThèmeShaper parmi d'autres ressources renommées.
En dehors de cela, n'hésitez pas à partager vos conseils, astuces, extraits de code ou tout ce que vous avez à l'esprit dans les commentaires ci-dessous. Nous aimerions savoir où et comment vous en apprendrez davantage sur WordPress. À plus!