Après quelques années (voire mois) de conception et de développement de thèmes WordPress, en particulier pour les clients, vous commencez à réaliser que de nombreuses fonctionnalités peuvent être standardisées ou regroupées dans un "thème ou kit de démarrage". Cela permet de démarrer le processus de développement et de progresser rapidement.
La meilleure première étape pour y parvenir, j’ai découvert, est de définir la plupart des fonctions communes et de les inclure dans le processus. functions.php . Ce functions.php Le fichier devra être étendu pour répondre aux besoins du thème particulier au fur et à mesure que de nouveaux projets apparaissent, mais il fournira un point de départ plus que génial pour le développement.
Il y a environ 13 fonctions clés que j'aime commencer avec et les ajoutera au besoin ...
La fonctionnalité de menu de navigation, introduite dans WordPress 3.0, permet la création et la maintenance intuitives de menus de navigation par thèmes.
À tout le moins, un thème standard nécessitera un menu de navigation principal, peut-être dans l’en-tête et un menu de navigation secondaire dans le pied de page. Pour ce faire, nous enregistrerons ces deux menus "Menu principal" et "Menu secondaire"
Bien que ce ne soit pas une nouveauté particulière, il est tout de même agréable de l’emballer dans une if function_exists() juste au cas où l'utilisateur serait bloqué dans une installation pré 3.0:
dans le functions.php fichier, inclure les éléments suivants:
if ( function_exists( 'register_nav_menus' ) ) {register_nav_menus(array('main_menu' => __( 'Main Menu', 'cake' ),'secondary_menu' => __( 'Secondary Menu', 'cake' ),));} Maintenant que les menus sont enregistrés, nous devons indiquer le thème sur lequel les sortir. Nous aimerions que le menu principal apparaisse dans notre en-tête. Donc, dans notre header.php fichier, nous incluons le code suivant:
'main_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Tout d'abord, nous vérifions si nous avons un menu appelé 'main_menu' défini et si nous le faisons, nous insérons son contenu ici, sinon nous revenons à la valeur par défaut wp_list_pages() que nous pouvons personnaliser davantage pour afficher les liens dont nous avons besoin.
Si vous souhaitez personnaliser davantage le menu, consultez le WordPress Word page sur wp_nav_menu() fonction.
Nous voulons que le menu secondaire apparaisse dans le pied de page, nous ouvrons donc le footer.php et inclure le code suivant:
'secondary_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Cette fonction vous permet d'utiliser un CSS personnalisé pour personnaliser l'éditeur visuel de WordPress TinyMCE.
Créez un fichier CSS nommé editor-style.css et collez vos styles à l'intérieur. En tant que placeholder, j'aime commencer par les styles dans le editor-style.css fichier du thème Twenty Twelve.
dans le functions.php ajoutez ce qui suit:
add_editor_style();Si vous ne souhaitez pas utiliser le nom "editor-style" pour votre fichier CSS et que vous souhaitez également déplacer le fichier ailleurs, par exemple dans un répertoire css, modifiez la fonction.
Par exemple, je veux nommer mon fichier tiny-mce-styles.css et je le veux dans mon répertoire CSS; donc ma fonction ressemblera à ceci:
add_editor_style('/css/editor-style.css'); Bien que nous y soyons, nous pourrions aussi bien éditer l'éditeur pour les langues de droite à gauche. Dans le répertoire du thème, créez un fichier CSS appelé editor-style-rtl.css et, à tout le moins, inclure les éléments suivants:
html .mceContentBody {direction: rtl;unicode-bidi: embed;}li {margin: 0 24px 0 0;margin: 0 1.714285714rem 0 0;}dl {margin: 0 24px;margin: 0 1.714285714rem;}tr th {text-align: right;}td {padding: 6px 0 6px 10px;text-align: right;}.wp-caption {text-align: right;}Encore une fois, en tant qu'espace réservé, les styles ci-dessus proviennent du thème Twenty Twelve. Restylez et étendez au besoin.
La plupart des personnes qui commentent les blogs en ligne ont un avatar associé. Si, cependant, ils ne le font pas et que vous n'aimez pas particulièrement les options d'avatar par défaut de WordPress, vous pouvez définir les vôtres.
Pour ce faire, incluez le code suivant dans votre functions.php :
if ( !function_exists('cake_addgravatar') ) {function cake_addgravatar( $avatar_defaults ) {$myavatar = get_template_directory_uri() . '/images/avatar.png';$avatar_defaults[$myavatar] = 'avatar';return $avatar_defaults;} add_filter ('avatar_defaults', 'cake_addgravatar');} Ce que nous faisons ici en premier est de vérifier si la fonction existe. Si c'est le cas, nous ajoutons un filtre qui indique à WordPress d'utiliser notre avatar défini par défaut comme mode par défaut.
Nous disons à WordPress de trouver cet avatar dans notre répertoire "images" dans le répertoire du thème. L'étape suivante consiste évidemment à créer l'image elle-même et à la télécharger dans le dossier "images".
La fonctionnalité de post-formats vous permet de personnaliser le style et la présentation des articles. À ce jour, les utilisateurs peuvent choisir parmi 9 formats de post standard: de côté, galerie, lien, image, citation, statut, vidéo, audio et chat. En plus de cela, le format de publication par défaut "Standard" indique qu'aucun format de publication n'est spécifié pour le message en question.
Pour ajouter cette fonctionnalité à votre thème, incluez le code suivant dans votre functions.php , en spécifiant les formats de messages dont vous profiterez. Par exemple, si vous ne voulez que les formats postaux image, lien, devis et statut, votre code devrait ressembler à ceci:
add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status' ) );La fonction d'image en vedette, comme le codex explique, permet à l'auteur de choisir une image représentative pour les messages, les pages ou les types de messages personnalisés.
Pour activer cette fonctionnalité, incluez le code suivant dans votre functions.php :
add_theme_support( 'post-thumbnails' );Nous pourrions nous arrêter là et laisser à WordPress le soin de définir les tailles de vignettes ou nous pourrions prendre le contrôle et les définir nous-mêmes. Nous allons faire le dernier, évidemment!
Disons que nous gérons un site de magazine où l'image sélectionnée apparaîtra dans au moins 3 tailles différentes. Peut-être une grande image si la publication est en vedette ou si elle est la plus récente, une image de taille moyenne si elle n’est qu’un message parmi le reste et une taille normale pouvant apparaître ailleurs.
Nous profitons de la add_image_size() fonction qui indique à WordPress de faire une copie de notre image sélectionnée dans nos tailles définies.
Pour ce faire, nous ajoutons les éléments suivants au functions.php :
// regular sizeadd_image_size( 'regular', 400, 350, true );// medium sizeadd_image_size( 'medium', 650, 500, true );// large thumbnailsadd_image_size( 'large', 960, '' ); Voir comment travailler avec le add_image_size() fonction de recadrer ou de recadrer vos images sur le WordPress Word page.
Une fois que nous avons défini les tailles d'image ci-dessus (standard, moyen et grand) - et que par défaut WordPress ne le fait pas pour nous - nous ajouterons la possibilité de sélectionner ces tailles d'image à partir de l'interface Attachment Display Settings .
Ce serait bien si vous pouviez, lors de l'écriture d'un article, insérer l'image de taille désirée en la sélectionnant dans la liste déroulante comme vous le feriez normalement pour les tailles par défaut de WordPress.
Pour ce faire, nous ajoutons ce qui suit à notre functions.php :
// show custom image sizes on when inserting mediafunction cake_show_image_sizes($sizes) {$sizes['regular'] = __( 'Our Regular Size', 'cake' );$sizes['medium'] = __( 'Our Medium Size', 'cake' );$sizes['large'] = __( 'Our Large Size', 'cake' );return $sizes;} add_filter ('image_size_names_choose', 'cake_show_image_sizes'); Grâce à cela, nous pouvons sélectionner nos tailles d’image.
Celui-ci est simple. Si vous construisez des thèmes WordPress pendant un moment, vous vous souviendrez des jours où vous deviez inclure manuellement du code pour afficher le flux RSS directement dans le fichier header.php. Cette approche est plus propre et repose sur la wp_head() action hook pour sortir le code nécessaire.
dans le functions.php fichier, inclure les éléments suivants:
// Adds RSS feed links to for posts and comments.add_theme_support( 'automatic-feed-links' ); Assurez-vous que vous avez it in the , right before end of header.php it in the , right before end of &rgt;/head&lgt;
Avec cette fonction, vous faites le premier pas pour rendre votre thème disponible pour la traduction.
Il est préférable d'appeler cette fonction depuis le after_setup_theme() crochet d'action, c'est-à-dire après que les actions d'installation, d'enregistrement et d'initialisation de votre thème ont été exécutées.
add_action('after_setup_theme', 'my_theme_setup');function my_theme_setup(){load_theme_textdomain('my_theme', get_template_directory() . '/languages');} Maintenant, ajoutez un répertoire nommé ' languages 'dans votre répertoire de thème.
Vous pouvez en apprendre plus sur la fonction load_theme_textdomain () sur le Page de codex WordPress .
La largeur du contenu est une fonctionnalité des thèmes qui vous permet de définir la largeur maximale autorisée pour les vidéos, les images et tout autre contenu oEmbed d'un thème.
Cela signifie que lorsque vous collez cette URL YouTube dans l'éditeur et que WordPress affiche automatiquement la vidéo réelle sur le frontal, cette vidéo ne dépassera pas la largeur que vous avez définie à l'aide du $content_width variable.
if ( ! isset( $content_width ) )$content_width = 600;WordPress recommande également l'ajout des CSS suivants:
.size-auto,.size-full,.size-large,.size-medium,.size-thumbnail {max-width: 100%;height: auto;} Bien que ce soit utile, c'est un peu lourd. Il définit la largeur du contenu pour tout le contenu. Que faire si vous vouliez des vidéos d'une plus grande largeur sur les pages que dans les messages et une taille encore plus grande dans un type de message personnalisé? Actuellement, il n'y a aucun moyen de définir cela. Il y a cependant un demande de fonctionnalité proposant l'inclusion de la $content_width variable dans le intégré add_theme_support() .
Votre thème typique aura au moins une barre latérale. Le code pour définir la barre latérale est assez simple.
Ajoutez ce qui suit à votre functions.php :
if(function_exists('register_sidebar')){register_sidebar(array('name' => 'Main Sidebar','before_widget' => '','after_widget' => '','before_title' => '','after_title' => '
',));} Cela enregistre et définit une barre latérale nommée "Main Sidebar" et son balisage HTML.
Vous pouvez en apprendre plus sur le register_sidebar() fonction sur la page WordPress WordPress.
Vous trouverez régulièrement le besoin d'avoir plus d'une barre latérale pour pouvoir simplement copier / coller le code ci-dessus et changer le nom.
Il y a aussi register_sidebars() fonction qui vous permettra d'enregistrer et de définir plusieurs barres latérales en une seule fois, mais cela ne vous donne pas la flexibilité de donner à chaque nouvelle barre latérale un nom unique.
Si vous affichez des extraits de vos publications sur une page d'index de blog, WordPress affichera par défaut [...] pour indiquer il y a plus "après le saut".
Vous voudrez probablement ajouter un "lien supplémentaire" et définir son apparence.
Pour ce faire, nous devons ajouter le code suivant à notre functions.php :
function new_excerpt_more($more) {global $post;return '...
function cake_content_nav( $nav_id ) {global $wp_query;if ( $wp_query->max_num_pages > 1 ) : ?>Si vous avez des instructions spéciales dans votre thème, par exemple. Dans votre page d'options de thème que l'utilisateur souhaite voir lors de la première activation du thème, vous pouvez utiliser la fonction suivante pour les rediriger:
if (is_admin() && isset($_GET['activated']) && $pagenow == "themes.php")wp_redirect('themes.php?page=themeoptions'); Portez une attention particulière à la wp_redirect() fonction. Assurez-vous de remplacer le ' themes.php?page=themeoptions 'avec l'URL de votre page.
Au cours du développement, je trouve parfois que la barre d'administration de WordPress est assez distrayante.
Il se trouve dans une position fixe en haut de la fenêtre et peut, en fonction de ma mise en page, couvrir certains éléments de l’en-tête.
Tout en continuant à concevoir et à développer, j'aime cacher la barre d'administration avec cette fonction pratique.
show_admin_bar( false );Avez-vous des fonctions préférées pour lancer le développement de modèles WordPress? Quelles fonctions aimeriez-vous voir? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image multi-outils via Shutterstock.