Maak shortcodes voor ons WordPress-thema

Sinds we met dit project zijn begonnen, wilden we altijd dat het een eigen label zou hebben, en daarom gebruiken we de tweede sjabloon DesdeLinux, het is door ons 100% gemaakt.

Daarna volgden andere versies, en hoewel we bepaalde webservices kunnen kopen of huren om onze ontwerpen te maken, zoals die van StudioDWeb.com, of koop sjablonen die al zijn gemaakt in ThemeForest.net, we hebben altijd al onze eigen willen hebben, aangepast aan onze behoeften en doorstaan WebDevelopment.com kan helpen 😀

Hoe dan ook, ik ben gepassioneerd door webdesign en ontwikkeling, en ik ben al bezig met het nieuwe onderwerp voor DesdeLinux en ik zal je enkele screenshots laten zien van hoe het eruit ziet.

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 u kunt zien, past het bij onze maat en hebben we er nieuwe bijgeleverd shortcodes voor de uitwerking van de artikelen.

Daarom kwam het bij me op om met u te delen hoe u een van deze kunt maken (de informatieve) voor het geval u ze wilt opnemen in uw onderwerpen van WordPress. Ik bedoel, 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 maken we gebruik van «het Zwitserse zakmes» van WordPress, Ik bedoel het dossier function.php die we normaal gesproken in bijna alle onderwerpen aantreffen.

Haakjes_Functie

Ejemplo del Function.php con los ShortCodes de DesdeLinux

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');

Vanaf hier verduidelijken we een aantal dingen. Ten eerste, als we twee maten gebruiken, geven we commentaar op de regel // info het is maar een opmerking.

In dit geval de naam van de functie informatie box Het kan worden gewijzigd in wat we maar willen, maar het moet overeenkomen met de naam die we in de laatste regel gebruiken.

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;

veranderlijk $ inhoud dat is waar de inhoud die we in de ShortCode plaatsen standaard naartoe gaat, het zal een null-waarde retourneren als we niets plaatsen.

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

add_shortcode( 'info', 'infobox' );

Waar je kunt veranderen info voor wat we willen. Om het eruit te laten zien als het voorbeeld, moeten we het volgende geven:

[ 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 het .. ik herhaal, ik ben geen programmeur of iets dergelijks, en de uitleg die ik heb gegeven is hoe ik begrijp dat de ShortCode werkt 😛


9 reacties, laat de jouwe achter

Laat je reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

*

*

  1. Verantwoordelijk voor de gegevens: Miguel Ángel Gatón
  2. Doel van de gegevens: Controle SPAM, commentaarbeheer.
  3. Legitimatie: uw toestemming
  4. Mededeling van de gegevens: De gegevens worden niet aan derden meegedeeld, behalve op grond van wettelijke verplichting.
  5. Gegevensopslag: database gehost door Occentus Networks (EU)
  6. Rechten: u kunt uw gegevens op elk moment beperken, herstellen en verwijderen.

  1.   overgebleven 72 zei

    Ik hou van hoe het eruit ziet, ik feliciteer je.

    1.    levendig zei

      Bedankt, je hebt nog een lange weg te gaan, maar bedankt.

  2.   Rogers zei

    Zeer goed!! Ik zou zo'n thema geweldig vinden in mijn WP.
    Ik feliciteer jou!

    1.    levendig zei

      Ik heb het nog niet gezegd, ik kan het je verkopen HAHAHAHAHA .. Grapje 🙂

  3.   Manuel E. zei

    Uitstekend, bedankt voor het delen.
    Dit soort bronnen is hard nodig op internet, waarbij de zaken duidelijk worden uitgelegd.

    Groeten!

  4.   eliotime3000 zei

    Mooi ontwerp. Eens kijken of je me dat sjabloon voor mijn website kunt geven om het aan te passen.

  5.   cuervo291286 zei

    dat kan worden gedaan in blogger?

  6.   Xavier zei

    Nou, niets, ik heb het gezegd zoals het is en het werkt niet voor mij, wat zou het kunnen zijn? : /

    Ik heb [info] informatie [/ info] geplaatst

    en in mijn WordPress-bericht verschijnt het alleen: informatie, de haakjes verdwijnen, ik denk dat er iets mis is: /

    1.    Johnny Silva zei

      Misschien zijn in uw sjabloon de ShortCodes niet gedefinieerd in de function.php, zoals in mijn geval, deze waarden worden toegevoegd in een bestand met de naam shortcodes.php van mijn thema