Hur du lägger till ett anpassat avsnitt till Hestia

Det här dokumentet visar de steg som krävs för att lägga till ett nytt avsnitt, text, bild, innehåll osv … på hemsidan.

Använda Hestia Pro

Hestia Pro har ett stort antal krokar som kan användas för att enkelt lägga till nytt innehåll på hemsidan. Krokarna är listade i Utseende> Hestia Pro Hooks. Se nedan ett exempel på hur du kan använda dem för att lägga till ett nytt avsnitt på hemsidan.

Steg 1: Skapa avsnittet

Det första steget är att skapa det avsnitt du vill lägga till på hemsidan. Du kan antingen använda ett plugin för detta eller skriva din egen HTML / PHP-kod.

Steg 2: Haka upp avsnittet

Det sista steget är att verkligen ansluta det avsnitt du just har skapat på Hestia Pro: s hemsida. För att göra det måste du gå till Utseende> Hestia Pro Hooks, hitta den krok du behöver, lägg till koden för det nya avsnittet och klicka på “Spara krokar”.

exempel

1. Lägg till en Handla efter fler produkter -knappen efter butiksavsnittet.

HTML-koden jag skulle behöva är den här (se till att du byter ut den https: // localhost / shop / med länken till din butiksida):

Handla efter fler produkter

Och jag skulle lägga till det i Efter butiksavsnittbehållare krok. Se också till att kontrollera Kör PHP toggle.

Resultatet skulle bli så här:

2. Lägg till ett dragspel avsnitt med vanliga frågor efter lagavsnittet

Med hjälp av ett plugin som Shortcodes Ultimate Plugin kan du skapa ett nytt avsnitt genom att gå till Kortkoder> Tillgängliga kortkoder. Kopiera önskad kortkod och klistra in den Utseende> Hestia Pro Hooks, i den krok som bäst passar dina behov. I det här exemplet har vi använt Efter lagavsnitt krok.

Detta är resultatet:

Här kan du se Hestia PRO: s krokar.

Använda Hestia

Notera: Hestia Lite-guiden antar att du har kunskap om FTP och hur du redigerar webbplatsens filer. I guiden lägger vi bara till några få sektioner med Hestia Hooks och ger koden för att få dem centrerade. Om du försöker lägga till dina egna kortkoder genom att följa den här guiden och se att de inte är centrerade måste du lägga till din egen CSS / HTML för att åtgärda problemet eller kontakta en frilansare om du behöver hjälp.

Steg 1.

Installera Shortcodes Ultimate Plugin, det här är det plugin vi kommer att använda i den här guiden för att skapa avsnitten. Shortcodes Ultimate tillhandahåller en mängd fantastiska kortkoder att använda i hela ditt tema. I denna handledning kommer vi att använda Youtube Shortcode och knappens shortcode. Du kan kolla in den ultimata “Exemplen” -menyn för kortkoder för att se kortkoderna som de tillhandahåller. Som nämnts kommer vi bara att lägga till två avsnittstyper i den här tutorialen. Vissa andra kortkoder kan kräva olika CSS för att få dem centrerade och kräver att du får hjälp från en frilansare.

Steg 2.

Skapa ett barntema för Hestia

Är din webbplats igång redan? I det här fallet rekommenderar vi att du skapar ett webbplatsspecifikt plugin, se här: Hur skapar du ett webbplatsspecifikt plugin.

Videon nedan visar också hur du skapar en webbplatsspecifik plugin:

När du skapar plugin-filen är den enda texten som verkligen krävs:

 
 Spara dina plugin-filändringar och aktivera den sedan. Nu är vi redo att lägga till några anpassade avsnitt.
Steg 3.
 I functions.php fil för ditt Hestia Child-tema ELLER i plugin-filen du just skapade för din webbplats specifika plugin måste du skapa en funktion och sedan fästa den funktionen till Hestia kroken du vill använda.
 Klistra in följande kod, i filen kommer du att märka att den redan har lagt till någon CSS för att centrera videon och formatera texten så att den passar temat:
funktion new_section_1 () {

echo do_shortcode ('
YouTube-video
[su_youtube url = "https://www.youtube.com/watch?v=pYOJNOJfJxU"]
');

}

add_action ('hestia_before_about_section_hook', 'new_section_1');
 Du borde ha något som ser ut så här:
 
 Från koden ovan kan du ändra namnet " new_section_1"till vilket namn du gillar, men se till att ändra det på båda platserna:
 
 Koden ovan lägger till en youtube-video före avsnittet om i Hestia kan du ändra den visade videon genom att ändra youtube-länken i koden. Om du vill ändra platsen för videon på första sidan kan du byta krok.
 Alla tillgängliga krokar kan ses här: Hestia tillgängliga krokar
 Kroken som användes ovan var:
hestia_before_about_section_hook
 Låt oss säga att vi i stället vill lägga till detta avsnitt under funktionsavsnittet, vi skulle helt enkelt byta krok till:
hestia_after_features_section_hook
 Så till slut kommer vår kod att se ut så här:
 
 Om vi ​​ville ha två olika videor i två olika sektioner kan vi lägga till två liknande kodblock genom att ändra krok och funktionsnamn. Nedan lägger vi till olika videor innan avsnittet om och före butiksavsnittet:
 
 Var uppmärksam på de numrerade pilarna för att identifiera de ändringar som gjorts. Du kan upprepa detta steg för att lägga till så många videosektioner du gillar i olika delar av framsidan.
Lägga till knappar
 Nu när vi har visat hur du lägger till en video lägger vi till en anpassad knapp. Stegen är desamma som ovan, vi behöver bara ändra CSS lite och kortkoden. Shortcodes Ultimate-pluginet erbjuder många olika knappdesign,
 För att lägga till en knapp och centrera den använder du den här koden med din funktion och krok du väljer:
do_shortcode ('
[su_button radius = "square" url = "http://google.com"] Klicka på mig [/ su_button]
');
 Länken som knappen pekar på i det här fallet är google.com men du kan ändra den till vad du vill.
 Om vi ​​ville lägga till en knapp under vår video i ett av våra anpassade avsnitt så kan vi helt enkelt lägga till det nya kodblocket under det gamla, din kod skulle se ut så här:
 Ditt resultat skulle vara detta:
 Naturligtvis kan du lägga till olika typer av knappdesign som stöds av Shortcodes Ultimate. Gå till för att se de olika knappfunktionerna WordPress Dashboard-> Kortkoder-> Exempel.
 Knappen ovan skapades med den här kortkoden:
[su_button style = "3d" size = "18" bakgrund = "# d50000" url = "http://google.com"] Klicka på mig [/ su_button]
 Det är allt som finns åt det. Du kan testa olika kortkoder från Ultimate Shortcodes för att lägga till dina anpassade avsnitt. Kolla in Shortcodes Ultimate's fuskblad för att se accepterade knappparametrar. Vi rekommenderar att du behåller Material Design-flödet för temat om du planerar att använda knappar du kan hitta alla Material Design-färger och deras hexkod här: https://www.materialpalette.com/colors.
 Notera: Den här artikeln antar att du har lite kunskap om kodning och hur du redigerar dina webbplatsfiler. Som nämnts tidigare kan det bli ett behov av att kontakta en frilansare eftersom vi inte kan hjälpa till i alla förfrågningar om anpassad kodning.
 
 
 Jeffrey Wilson Administrator
 Sorry! The Author has not filled his profile.
 follow me