Maak shortcodes voor ons WordPress-thema

Sinds we met dit project begonnen, wilden we er altijd al onze eigen stempel op drukken. Daarom is de tweede template die we bij DesdeLinux gebruiken volledig door ons gemaakt.

Er volgden andere versies, en hoewel we bepaalde webdiensten kunnen kopen of inhuren om onze ontwerpen te maken, zoals die van EstudioDWeb.com , of kant-en-klare sjablonen kunnen kopen van ThemeForest.net , hebben we altijd al onze eigen ontwerpen willen hebben, aangepast aan onze behoeften. Een bezoek aan DesarrolloWeb.com kan daarbij nuttig zijn 

Hoe dan ook, ik ben gepassioneerd over webdesign en -ontwikkeling, en ik werk al aan het nieuwe thema voor DesdeLinux. Ik zal jullie binnenkort wat screenshots laten zien van hoe het er al voor staat.

Het idee is niet om uit te komen waar we al aan zijn aangepast, dus veel elementen blijven hetzelfde of op een vergelijkbare manier. Ik begin met de homepage

screenshot-dl

En dit is hoe de artikelen eruit zouden zien:

screenshot-dl-bericht

Zoals je ziet, pakt het perfect uit voor ons, en we hebben nieuwe shortcodes toegevoegd voor het maken van de artikelen.

Daarom leek het me een goed idee om met jullie te delen hoe je er eentje kunt maken (de informatie-editor), voor het geval je ze in je WordPress -thema's wilt opnemen . Zoiets als dit:

Dit wordt het voorbeeld ShortCode

Ik ben geen expert in programmeren met dit CMS, dus ik zal niet proberen uit te leggen waarom en hoe het op deze manier werkt, ik zal je alleen laten zien hoe je het moet doen, punt uit.

Hiervoor gebruiken we het "Zwitserse zakmes" van WordPress , ik doel op het functions.php- bestand dat we meestal in bijna alle thema's aantreffen.

Haakjes_Functie

Voorbeeld van Function.php met DesdeLinux ShortCodes

Wat we in dit bestand zullen doen, is de structuur van onze ShortCode toevoegen en natuurlijk het label dat het laat zien. Laten we er dus naar toe gaan.

Binnen het Function.php

In ons function.php-bestand zullen we de HTML-structuur van de ShortCode plaatsen, maar het is niet zomaar om de HTML-tags zomaar te plaatsen. We zouden zoiets als dit hebben:

// Infofunctie infobox ($ atts, $ content = null, $ code = "") {$ return = ' '; $ return. = $ inhoud; $ return. = ' '; retour $ retour; } // De ShortCode add_shortcode ('info', 'infobox');

Laten we een paar dingen verduidelijken. Ten eerste, wanneer we twee schuine strepen gebruiken, zetten we de regel in commentaar. Dus // Info is gewoon een commentaar.

De functienaam, in dit geval infobox, kan naar wens worden gewijzigd, maar moet wel overeenkomen met de naam die we in de laatste regel hebben gebruikt.

En cada $ Terug te keren we retourneren wat de HTML-tags zijn geweest, en er moet rekening mee worden gehouden dat na de eerste een punt moet worden toegevoegd voor de gelijk teken en de regel eindigt met een teken van puntkomma

voorbeeld:

$ return. = $ inhoud;

De variabele $content , waarin de inhoud van de shortcode wordt opgeslagen, retourneert een null-waarde als er niets in staat.

Nu is de naam van de ShortCode wat we instellen met:

add_shortcode( 'info', 'infobox' );

Hier kunt u de informatie naar wens aanpassen. Om het er net zo uit te laten zien als in het voorbeeld, moeten we het volgende invoeren:

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

Hoewel natuurlijk zonder de spaties, die ik zet omdat de ShortCode uiteraard geactiveerd zou worden.

ShortCode-stijl

Als je naar de bovenstaande regel kijkt, zonder de PHP-code en variabelen, zou de ShortCode in pure HTML er ongeveer zo uitzien:

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

We hoeven dus alleen de CSS-stijl toe te passen.

.alert.alert-info {achtergrond: # d9edf7 url (info.png) geen herhaling 7px 50%; grensradius: 4px; rand: 1px solid # bce8f1; kleur: # 3a87ad; lettergrootte: 14px; marge: 15px 15px; opvulling: 15px 15px 15px 50px text-align: left}

En dat is alles... Ik herhaal, ik ben geen programmeur of iets dergelijks, en de uitleg die ik heb gegeven is hoe ik begrijp dat ShortCode werkt 


Voeg dit toe als voorkeursbron in Google.