Créez des shortcodes pour notre thème WordPress

Depuis que nous avons commencé ce projet, nous avons toujours voulu qu'il ait notre propre étiquette, et c'est pourquoi le deuxième modèle que nous utilisons dans DesdeLinux, a été créé par nous à 100%.

Ensuite, d'autres versions ont suivi, et bien que nous puissions acheter ou louer certains services Web pour créer nos conceptions comme celles de StudioDWeb.com, ou achetez des modèles déjà créés dans ThèmeForest.net, nous avons toujours voulu avoir le nôtre, adapté à nos besoins et nous arrêter WebDevelopment.com peut être utile 😀

Quoi qu'il en soit, je suis passionné par la conception et le développement Web, et je travaille déjà sur le nouveau sujet pour DesdeLinux et je vais vous montrer quelques captures d'écran de son apparence.

L'idée n'est pas de sortir de ce à quoi nous sommes déjà adaptés, tant d'éléments restent les mêmes ou de manière similaire. Je commence par la page d'accueil

Et voici à quoi ressembleraient les articles:

Comme vous pouvez le voir, cela correspond à notre mesure et nous avons inclus de nouveaux Codes courts pour l'élaboration des articles.

C'est pourquoi il m'est venu à l'esprit de partager avec vous comment en créer un (celui d'information) au cas où vous voudriez les inclure dans vos sujets de Outils de gestion. Je veux dire, quelque chose comme ça:

Je ne suis pas un expert en programmation avec ce CMS, donc je n'essaierai pas d'expliquer pourquoi et comment cela fonctionne de cette façon, je vais seulement vous montrer comment le faire, point final.

Pour cela, nous utilisons «le couteau suisse» de Outils de gestion, Je veux dire le fichier fonction.php que nous trouvons normalement dans presque tous les sujets.

Exemple de Function.php avec ShortCodes DesdeLinux

Ce que nous allons faire dans ce fichier, c'est ajouter la structure de notre ShortCode et bien sûr, l'étiquette qui le montre. Alors allons-y.

À l'intérieur du Function.php

Dans notre fichier function.php, ce que nous allons mettre sera la structure HTML du ShortCode, mais ce n'est pas simplement pour mettre les balises HTML comme ça. Nous aurions quelque chose comme ceci:

// Info fonction infobox ($ atts, $ content = null, $ code = "") {$ return = ' '; $ return. = $ content; $ return. = ' '; return $ return; } // Le ShortCode add_shortcode ('info', 'infobox');

De là, nous clarifions un certain nombre de choses. Premièrement, lorsque nous utilisons deux barres, nous commentons la ligne, donc // Info c'est juste un commentaire.

Le nom de la fonction, dans ce cas boîte d'info Il peut être changé en ce que nous voulons, mais il doit correspondre au nom que nous utilisons dans la dernière ligne.

exemple:

$ return. = $ content;

Laissez variable $ content c'est là que va le contenu que nous mettons dans le ShortCode par défaut, il retournera une valeur nulle si nous ne mettons rien.

Maintenant, le nom du ShortCode est ce que nous définissons avec:

add_shortcode( 'info', 'infobox' );

Où tu peux changer info pour ce que nous voulons. Maintenant, pour le faire ressembler à l'exemple, nous devons mettre:

[ info ]Este será el ShortCode de ejemplo[ /info ]

Bien sûr, sans les espaces, que j'ai mis car évidemment le ShortCode serait activé.

Style de ShortCode

Si vous regardez la ligne ci-dessus, sans le code PHP et les variables, le ShortCode en HTML pur ressemblerait à ceci:

<div class="alert-info"></div>

Nous n'avons donc qu'à appliquer le style CSS.

.alert.alert-info {arrière-plan: # d9edf7 url (info.png) no-repeat 7px 50%; rayon de la bordure: 4px; bordure: 1px solide # bce8f1; couleur: # 3a87ad; taille de la police: 14px; marge: 15px 15px; remplissage: 15px 15px 15px 50px text-align: left}

Et c'est tout .. Je le répète, je ne suis pas un programmeur ou quelque chose comme ça, et l'explication que j'ai donnée est de savoir comment je comprends que le ShortCode fonctionne 😛