Dans cet article, nous terminerons notre incursion dans la construction d'un thème WordPress à partir de zéro, en nous concentrant sur le raffinage de nos modèles, en ajoutant des méta-informations, en après les miniatures, des barres latérales, des commandes conviviales et plus encore.
Il s'agit de la troisième et dernière partie de la série WordPress sur la construction d'un thème WordPress. La partie 1 a introduit WordPress Théming, et dans la partie 2, nous avons construit un thème de base. Nous avons utilisé le modèle de blog Clean par startbootstrap pour ajouter du style à notre thème WordPress. Le code que nous avons écrit jusqu'à présent est disponible sur github.
Nous avons ajouté des modèles Single.php, page.php, archive.php et index.php, mais nous avons laissé la tâche de la finaliser pour cette partie de la tâche. Nous avons introduit des fonctions.php - un fichier que WordPress utilise pour inclure automatiquement des fonctionnalités particulières à notre thème, et nous y avons ajouté des fonctions. Nous avons ajouté une fonction d'en-tête dynamique à notre en-tête.php, et nous avons séparé cette fonctionnalité dans nos fonctions.php. Idéalement, cela devrait être organisé dans un fichier séparé - peut-être dans un dossier Inc à l'intérieur de notre thème - pour garder les choses propres.
Dans la partie 2, nous avons également introduit des partiels - footer.php et en-tête.php.
Dans l'article précédent, nous avons séparé notre balise
- l'ouverture - dans en-tête.php, et nous avons ajouté Php body_class (); ?> à lui. Cela ajoute des cours sémantiques au corps qui nous disent si nous sommes sur une page, poster, si nous sommes connectés ou non, etc. - nous permettant de styliser différents éléments de notre site Web en fonction des pages visitées et d'autres choses.Si nous visitons la page d'accueil et ouvrons la console du navigateur pour inspecter ces classes, nous verrons que nous n'avons pas les informations de modèle actuelles entre ces classes:
Pour pouvoir modifier les choses que WordPress affiche, nous devons savoir quel fichier est utilisé. Dans notre cas, index.php est utilisé comme modèle de secours par défaut. Cette infographie montre la hiérarchie des modèles utilisés. Il peut être très utile lors de la remplacement ou de la création de thèmes.
Dans l'article précédent, nous avons commencé à affiner la boucle archive.php, à ajouter des méta-informations et à publier des miniatures aux articles sortis. Nous séparerons cette boucle en un fichier séparé, l'inclure dans archive.php et index.php et terminer le raffiner.
Tout d'abord, nous remplacerons le contenu dans les deux fichiers entre While et Fin the Time par une seule ligne qui demande le fichier partiel, donc index.php ressemblera à ceci:
<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
<span><span><?php
</span></span><span> <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span> <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span> <span>endwhile;
</span></span><span> <span>endif;
</span></span><span> <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>Une fois que nous aurons fait cela, nous placerons le contenu que nous avons remplacé dans archive.php dans le fichier partiels / contenu.php:
<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span> <span><span><?php
</span></span><span> <span>if ( is_singular() ) :
</span></span><span> <span>the_title( '<h1 >', '</h1>' );
</span></span><span> <span>else :
</span></span><span> <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span> <span>endif;
</span></span><span>
</span><span> <span>if ( 'post' === get_post_type() ) :
</span></span><span> <span>?></span>
</span> <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span> <span><span><?php
</span></span><span> <span>bsimple_posted_on();
</span></span><span> <span>bsimple_posted_by();
</span></span><span> <span>?></span>
</span> <span><span><span></div</span>></span><!-- .entry-meta -->
</span> <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
<span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span> <span><span><?php
</span></span><span> <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span> <span>) );
</span></span><span> <span>?></span>
</span> <span><span><span></a</span>></span>
</span>
<span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>Une fois que nous avons téléchargé ces modifications au serveur, nous verrons que notre première page maintenant, dans chaque article de la liste des messages, a des Meta Information - Date et des liens de l'auteur:
Cela signifie que nos travaux partiels.
Nous pouvons voir qu'aucun de nos faux messages n'a d'images en général, et pas d'images en vedette spécifiquement. Si nous allons au tableau de bord WordPress et essayons d'ajouter la Image en vedette à notre post / page, nous verrons qu'il n'y a pas de champ de téléchargement de fichiers dans la barre latérale la plus à droite. (Pour ceux qui ne sont pas familiers avec WordPress, plus sur cette fonctionnalité peut être lue ici.)
Les miniatures post-post ne sont pas activées par défaut dans les thèmes WordPress. C'est une fonctionnalité qui doit être allumée spécifiquement dans de nouveaux thèmes. La plupart des thèmes l'ont activé.Pour ce faire, nous incluons add_theme_support («post-trimbnaute»); ligne à nos fonctions.php.
Maintenant, les miniatures sont activées.
Maintenant, nous pouvons vider notre installation WordPress de tout le contenu en utilisant le site WP de commande WP-CLI vide - ALLOW-ROOT (ou nous pouvons le faire manuellement à partir du tableau de bord WordPress) et le repopuler avec FakerPress. Il devrait remplir les publications et les pages avec des images en vedette qu'il saisit sur Internet. (Nous devrons recréer le menu supérieur comme avant et y attribuer des pages et des publications.)
Un conseil: si nous construisons des thèmes à vendre, ou généralement des thèmes qui seront publiés à un public plus large, nous pouvons vouloir utiliser
Données de test unitaire de thème fournies par Automattic, comme il peut fournir Contenu pour tester une portée plus large des cas et des détails du thème.
Nous pouvons spécifier les tailles d'image à FakerPress, mais cela se traduira-t-il toujours par un look désordonné.Lorsque nous construisons un thème, l'une des techniques utilisées pour réaliser un aspect poli et standardisé est de spécifier
Miniatures tailles . Ce sont des tailles standard que WordPress redimensionnera toute l'image téléchargée pour s'adapter. Nous utiliserons la fonction WordPress add_image_size () pour ajouter plusieurs tailles d'image que notre thème utilisera:
<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
<span><span><?php
</span></span><span> <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span> <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span> <span>endwhile;
</span></span><span> <span>endif;
</span></span><span> <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>Ensuite, nous allons publier l'une des images formatées en utilisant the_post_thumbnail () dans notre contenu.php:
<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span> <span><span><?php
</span></span><span> <span>if ( is_singular() ) :
</span></span><span> <span>the_title( '<h1 >', '</h1>' );
</span></span><span> <span>else :
</span></span><span> <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span> <span>endif;
</span></span><span>
</span><span> <span>if ( 'post' === get_post_type() ) :
</span></span><span> <span>?></span>
</span> <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span> <span><span><?php
</span></span><span> <span>bsimple_posted_on();
</span></span><span> <span>bsimple_posted_by();
</span></span><span> <span>?></span>
</span> <span><span><span></div</span>></span><!-- .entry-meta -->
</span> <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
<span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span> <span><span><?php
</span></span><span> <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span> <span>) );
</span></span><span> <span>?></span>
</span> <span><span><span></a</span>></span>
</span>
<span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>Pour réaliser un Extrait bien formaté dans notre liste d'archives ou de blogs, nous augmenterons la taille de la police, mais pour ce faire, nous réduirons le nombre de mots sortis par the_excerpt () :
<span>add_image_size( 'list-thumb-1', 730, 400, true); </span><span>add_image_size( 'small-list-thumb-1', 400, 200, true); </span><span>add_image_size( 'small-list-thumb-2', 300, 200, true); </span><span>add_image_size( 'small-list-thumb-3', 220, 140, true); </span>
Pour pouvoir faire flotter l'image (miniature que nous venons de mentionner) et extrait, nous ajoutons ce qui suit au sélecteur d'élément parent dans notre CSS:
<span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span> </span> <span><span><?php </span></span><span> <span>the_post_thumbnail( 'small-list-thumb-1'); </span></span><span> <span>?></span> </span><span><span><span></a</span>></span> </span>
(nous ne couvrons pas ici les plus petits ajustements de style qui ne sont pas cruciaux pour le thème lui-même.)
Maintenant, nous pouvons augmenter notre taille de police et faire flotter l'extrait autour de l'image, en flottant l'image (avec l'élément parent A):
Nous utiliserons également Post_thumbnails plus tard, sur des messages / pages uniques.
Les barres latérales du thème sont des zones widgetisées du thème. Ils doivent être enregistrés dans le système WordPress afin que nous puissions placer différents widgets à ces zones. Une fois que nous avons fait, nous imprimons - ou sortions - ces widgets dans nos fichiers de modèle.
Nous allons enregistrer un certain nombre de barres latérales dans notre thème, qui peuvent être vues dans le référentiel GitHub du thème. Nous le faisons en ajoutant le code suivant à nos fonctions.php:
<span># functions.php
</span><span>function custom_excerpt_length( $length ) {
</span> <span>return 40;
</span><span>}
</span><span>add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
</span>Ici, nous montrons comment enregistrer deux barres latérales. De plus amples détails sur la fonction register_sidebar () peuvent être trouvés sur wordpress.org.
Nous enregistrons onze barres latérales, mais nous n'avons pas besoin de produire tous ces éléments dans tous les modèles de pages ou les emplacements du site Web. S'ils sont sortis dans la page actuellement personnalisée, ils sont accessibles dans le Customizer sous widgets:
Voici un exemple de sortie réelle de la barre latérale ou du widget dans le pied de page.php - ce qui signifie qu'il peut être affiché à l'échelle mondiale:
<span><span>.home .post-preview.post</span> {
</span> <span>overflow: hidden;
</span><span>}
</span>Ici, nous utilisons un ID de barre latérale que nous avons utilisée dans la fonction Register_sidebar pour le bas_Center_sidebar ci-dessus.
Nous avons également conditionné la largeur du conteneur de contenu central sur la page d'accueil dépendant de la question de savoir s'il y a des barres latérales avec des widgets actifs (IS_ACTIVE_DIDEBAR ()):
<span>// Register custom sidebars
</span><span>function sidebar_register() {
</span>
<span>$args = array(
</span> <span>'name' => __( 'home_header', 'bsimple' ),
</span> <span>'description' => __( 'home_header', 'bsimple' ),
</span> <span>'id' => 'h_h',
</span> <span>'class' => 'home_header',
</span> <span>'before_widget' => ' <div >',
</span> <span>'after_widget' => '</div>',
</span> <span>'before_title' => '<h2 >',
</span> <span>'after_title' => '</h2>',
</span> <span>);
</span> <span>register_sidebar($args);
</span>
<span>$args = array(
</span> <span>'name' => __( 'archive_sidebar_1', 'bsimple' ),
</span> <span>'description' => __( 'Archive Sidebar no 1', 'bsimple' ),
</span> <span>'id' => 'a_s_1',
</span> <span>'class' => 'archive_sidebar_1',
</span> <span>'before_widget' => ' <div >',
</span> <span>'after_widget' => '</div>',
</span> <span>'before_title' => '<h2 >',
</span> <span>'after_title' => '</h2>',
</span> <span>);
</span> <span>register_sidebar($args);
</span>
<span>$args = array(
</span> <span>'name' => __( 'bottom_center_sidebar', 'bsimple' ),
</span> <span>'description' => __( 'Bottom Center Sidebar', 'bsimple' ),
</span> <span>'id' => 'b_c_s',
</span> <span>'class' => 'bottom_center_sidebar',
</span> <span>'before_widget' => '<div >',
</span> <span>'after_widget' => '</div>',
</span> <span>'before_title' => '<h2 >',
</span> <span>'after_title' => '</h2>',
</span> <span>);
</span> <span>register_sidebar($args);
</span>
<span>}
</span><span>add_action( 'widgets_init', 'sidebar_register' );
</span>Nous publions des classes bootstrap en fonction de ces conditions, en nous assurant que le thème ne semble pas vide si nous omettons la configuration de widgets pour des pages telles que Home .
Après avoir rempli ces zones de widgets avec des widgets et des images, c'est ce que nous obtenons:
Le thème s'annonce bien. Les lecteurs adapteront bien sûr le style à leur goût.
Lorsque nous parlons de style, nous mentionnerons l'API de personnalisation et montrerons comment l'utiliser pour donner un contrôle convivial des images d'arrière-plan pour les en-têtes.
Voici un exemple de la façon dont nous créons un nouveau Panneau , Section et Control Dans notre thème (fonctions.php à nouveau):
<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
<span><span><?php
</span></span><span> <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span> <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span> <span>endwhile;
</span></span><span> <span>endif;
</span></span><span> <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>L'essentiel ici est le crochet personnalisé_agister, et l'ordre des méthodes $ wp_customalize (add_panel, add_section, add_setting, add_control. L'ordre compte. Le codex wordpress a une référence détaillée de l'API personnalisateur.
Une fois que nous ajoutons nos paramètres et contrôles dans Functions.php, nous ajoutons le code suivant au bas de la fonction bsimple_scripts () que nous avons créée pour mettre en place nos scripts et nos styles:
<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span> <span><span><?php
</span></span><span> <span>if ( is_singular() ) :
</span></span><span> <span>the_title( '<h1 >', '</h1>' );
</span></span><span> <span>else :
</span></span><span> <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span> <span>endif;
</span></span><span>
</span><span> <span>if ( 'post' === get_post_type() ) :
</span></span><span> <span>?></span>
</span> <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span> <span><span><?php
</span></span><span> <span>bsimple_posted_on();
</span></span><span> <span>bsimple_posted_by();
</span></span><span> <span>?></span>
</span> <span><span><span></div</span>></span><!-- .entry-meta -->
</span> <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
<span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span> <span><span><?php
</span></span><span> <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span> <span>) );
</span></span><span> <span>?></span>
</span> <span><span><span></a</span>></span>
</span>
<span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>Nous avons ajouté des classes phome, pfront et pglobal à nos conteneurs d'en-tête. Maintenant, nous utilisons wp_add_inline_style () et la poignée de style bsimple que nous avons utilisée pour enfiler notre style de thème de base au début - pour produire des paramètres de personnalisation que nous venons de créer. Nous utilisons get_theme_mod () pour obtenir chaque paramètre que nous avons enregistré.
De cette façon, nous pouvons définir des images pour les en-têtes que nous avons séparés en fonction dynamic_header () dans partie 2 du guide:
<span>add_image_size( 'list-thumb-1', 730, 400, true); </span><span>add_image_size( 'small-list-thumb-1', 400, 200, true); </span><span>add_image_size( 'small-list-thumb-2', 300, 200, true); </span><span>add_image_size( 'small-list-thumb-3', 220, 140, true); </span>
La hiérarchie du modèle WordPress nous aide à cibler l'URL et la publication exactes chargées lors de la visite, afin que nous puissions concevoir atomiquement la sortie HTML pour chacun d'eux. Plusieurs fois, nous n'aurons pas besoin de créer tous les modèles.
Ajouter une image d'arrière-plan générique pour tous les messages ou pages n'aurait pas beaucoup de sens. Ainsi, notre stratégie de personnalisation fonctionnera pour les archives, pour la liste de blogs des articles, pour la première page, et même pour les termes peut-être. Mais pour des pages et des messages spécifiques, nous voulons probablement définir les images individuellement.
Comment faisons-nous cela?
Dans notre fonction dynamic_header (), nous avons identifié l'en-tête pour les pages , alors nous utiliserons maintenant un style en ligne et la fonction get_the_post_thumbnail_url () pour définir les pages Image en vedette comme fond d'en-tête:
<span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span> </span> <span><span><?php </span></span><span> <span>the_post_thumbnail( 'small-list-thumb-1'); </span></span><span> <span>?></span> </span><span><span><span></a</span>></span> </span>
Maintenant, l'utilisateur peut définir une image d'en-tête pour chaque page. Nous pouvons faire la même chose pour le cas is_single (), qui appliquera la même solution pour tous les messages - y compris les types de publication personnalisés.
Cette ligne permettra aux utilisateurs d'ajouter un champ personnalisé à chaque page, nommée Subtitle_, et elle sera sortie à l'en-tête de la page:
<span># functions.php
</span><span>function custom_excerpt_length( $length ) {
</span> <span>return 40;
</span><span>}
</span><span>add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
</span> 
Si nous ne voyons pas la section des champs personnalisés, nous pouvons l'activer via les options d'écran dans le coin droit de l'écran d'édition:
Une fois cela fait, nous verrons notre champ Meta Subtitle_ affichant ci-dessous le titre de la page sur les pages singulières:
Toutes ces choses - et styles - peuvent être appliquées à poteaux aussi.
Nous devons maintenant formater la sortie dans single.php et page.php aussi.
En raison des contraintes d'espace de ce guide, nous créerons le contenu que nous utiliserons dans ces deux modèles, mais la structure permettra aux lecteurs d'adapter et de personnaliser ces modèles plus spécifiquement si nécessaire:
<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
<span><span><?php
</span></span><span> <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span> <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span> <span>endwhile;
</span></span><span> <span>endif;
</span></span><span> <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>Ici, nous utilisons une disposition à une seule colonne, de large 10/12, centrée avec la classe MX-Auto. Nous utilisons le contenu partiel-sondère.php pour sortir le contenu réel.
Dans ce partiel, nous utilisons the_content () et wp_link_pages ():
<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span> <span><span><?php
</span></span><span> <span>if ( is_singular() ) :
</span></span><span> <span>the_title( '<h1 >', '</h1>' );
</span></span><span> <span>else :
</span></span><span> <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span> <span>endif;
</span></span><span>
</span><span> <span>if ( 'post' === get_post_type() ) :
</span></span><span> <span>?></span>
</span> <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span> <span><span><?php
</span></span><span> <span>bsimple_posted_on();
</span></span><span> <span>bsimple_posted_by();
</span></span><span> <span>?></span>
</span> <span><span><span></div</span>></span><!-- .entry-meta -->
</span> <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
<span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span> <span><span><?php
</span></span><span> <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span> <span>) );
</span></span><span> <span>?></span>
</span> <span><span><span></a</span>></span>
</span>
<span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>Maintenant, nous avons un minimum de base pour les pages et les messages uniques, mais plus peut être ajouté à l'aide de fonctions WordPress. Nous pouvons automatiquement spécifier les détails que nous voulons que WordPress publie dans un seul article, une seule page et des pages appartenant à des catégories spécifiques, etc.
Nous avons créé trois zones de widget (barre latérale) pour notre pied de page, et nous avons ajouté la sortie à Footer.php. Nous avons également ajouté une section - ou une zone de widget - juste au-dessus de la balise de pied de page. Ces widgets ne sont pas spécifiques à la page d'accueil, aux pages ou aux archives, mais elles sont plutôt mondiales. Une fois que nous leur attribuerons des widgets, ils afficheront à l'échelle du site:
<span>add_image_size( 'list-thumb-1', 730, 400, true); </span><span>add_image_size( 'small-list-thumb-1', 400, 200, true); </span><span>add_image_size( 'small-list-thumb-2', 300, 200, true); </span><span>add_image_size( 'small-list-thumb-3', 220, 140, true); </span>
Ce que nous obtenons est un simple fond et un pied de page, nous pouvons peupler avec des widgets:
Nous avons maintenant un thème minimal mais fonctionnel que nous pouvons utiliser pour afficher le contenu.
Ce guide s'arrêtera ici, mais la prochaine chose qu'un constructeur de thème potentiel peut vouloir faire est de s'assurer que tous les cas d'utilisation sont couverts et que le thème est 100% complet. Pour ce faire, installez le plugin de vérification de thème, entre autres outils, pour inspecter ce que nous manque de notre thème et assurez-vous que tout est à la hauteur des normes:
Ce guide a visé à être une introduction approfondie à la construction de thème WordPress. Il est à espérer avoir introduit tous les concepts fondamentaux de construction de thème WordPress et a démontré comment ils se réunissent.
Mais il y a encore des choses à apprendre - comme des commentaires partiels, des modèles d'auteur, 404 pages et de nombreux autres petits détails qui devraient être couverts si nous voulions devenir plus professionnels avec ce thème.
Le code initial de cette série est disponible chez GitHub ici, et la version finale du thème que nous avons construit dans ce guide est disponible ici.
sur ces fondations, beaucoup plus peuvent être construites, avec l'aide du codex WordPress complet.
Il y a trois articles dans cette série sur la construction d'un thème WordPress à partir de zéro:
wrapper dans WordPress?
Dans WordPress, le contenu d'un ID de page donné est généralement enveloppé dans A
Tag à des fins de style. Cependant, si vous souhaitez afficher le contenu sans le wrapper
, vous pouvez utiliser le filtre «The_Content». Ce filtre vous permet de modifier le contenu d'un message après sa récupération de la base de données mais avant son imprimé à l'écran. Voici un exemple simple de la façon dont vous pouvez utiliser ce filtre pour supprimer les balises
:
Fonction Support_p_tags ($ contenu) {
return strip_tags ($ contenu, '
') ;
}
add_filter ('the_content', 'disover_p_tags');
Ce code supprimera toutes les balises
du contenu du post. Veuillez noter que cela affectera tous les messages, alors utilisez-le attentivement.
Il pourrait y avoir plusieurs raisons pour lesquelles votre première page ne se charge pas dans WordPress . Voici quelques problèmes courants et leurs solutions:
1. Paramètres incorrects: Vérifiez vos paramètres WordPress sous Paramètres> Lecture et assurez-vous que la page correcte est définie comme première page.
2. Problèmes du thème: Le problème pourrait être avec votre thème. Essayez de passer à un thème WordPress par défaut et voyez si le problème persiste.
3. Conflits de plugin: Parfois, les plugins peuvent entretenir les uns avec les autres ou avec votre thème, ce qui fait que votre page de page ne se chargeait pas. Essayez de désactiver tous les plugins, puis réactivez-les un par un pour identifier le plugin problématique.
4. Fichier .htaccess corrompu: un fichier .htaccess corrompu peut également entraîner ce problème. Essayez de renommer votre fichier .htaccess à quelque chose comme .htaccess_old et voyez si cela résout le problème.
Si aucune de ces solutions ne fonctionne, ce pourrait être une bonne idée de contacter votre fournisseur d'hébergement ou un expert WordPress pour une aide plus approfondie .
Affichage du contenu d'un post dans une fenêtre contextuelle peut être réalisé en utilisant une combinaison de fonctions WordPress et JavaScript. Voici un exemple de base de la façon dont vous pouvez faire ceci:
Tout d'abord, vous devez obtenir l'ID post-post. Vous pouvez le faire en utilisant la fonction get_the_id () dans WordPress. Cette fonction renverra l'ID de la publication actuelle dans la boucle.
$ post_id = get_the_id ();
Ensuite, vous devez obtenir le contenu du message. Vous pouvez le faire en utilisant la fonction get_post_field (). Cette fonction récupère les valeurs d'un champ particulier à partir d'un post. Dans ce cas, vous souhaitez obtenir le champ 'post_content'.
$ post_content = get_post_field ('post_content', $ post_id);
Enfin, vous pouvez utiliser JavaScript pour afficher ce contenu dans une popup. Voici un exemple simple en utilisant la fonction alert ():
alert (' Php echo $ post_content ;?>');
Veuillez noter qu'il s'agit d'un exemple très basique et peut ne pas ne pas ne pas Travaillez parfaitement dans toutes les situations. Pour une solution plus robuste, vous voudrez peut-être envisager d'utiliser un plugin ou une bibliothèque JavaScript plus avancée pour la création de fenêtres populaires.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment supprimer la bordure de la zone de texte
Solution au blocage de Gmail
Comment acheter du Dogecoin
Utilisation de la fonction MySQL dateiff
Le rôle du masque de sous-réseau
Explication détaillée de l'utilisation de la fonction Oracle Substr
Que signifie le code open source ?
Comment lire les fichiers py en python
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
