Sådan tilføjer du ekstern CSS eller Javascript til din hjemmeside

det er lidt vanskeligt at bestemme, hvordan du tilføjer ekstern CSS eller Javascript til , hvis du bare er en nybegynder. Så før vi begynder at give nogle instruktioner om at tilføje ekstern CSS / Javascript til din hjemmeside, vil jeg gerne forklare de to hovedområder, hvor du måske skal bruge ekstern CSS:

1) hjemmeside tilpasninger

brug af ekstern CSS og Javascript er et godt valg i at tilpasse din hjemmeside, fordi du nemt kan vedligeholde koden, redigere og beholde filer og/eller koder. Vi er dog nødt til at opdele disse tilpasninger til to hovedtyper – mini-tilpasninger og større tilpasninger. Jeg vender tilbage til disse typer senere og forklarer, hvilke måder at tilføje CSS / JS-koder vil være bedre til forskellige situationer.

2) tredjeparts Serviceintegrationer

som vi alle ved, leverer nogle af Tjenesterne CSS-og JS-filer, der skal føjes til din hjemmeside som Formulartjenester, Chatbokse, tilføjelse af Facebook-kode og endda Google Analytics. Som et eksempel understøtter vi Google Analytics, og faktisk er integrationsprocessen i vores Temaindstillinger meget let og enkel, men hvis du vil spore nogle forskellige analyser og på en anden måde, skal du bruge de eksterne koder, der genereres af Google.

3 måder at tilføje ekstern CSS / JavaScript

brug af temaindstillingerne

hvis du har brug for at tilføje andre koder eller tilføje en hurtig og lille CSS og Javascript for at tilpasse din hjemmeside, er Temaindstillinger den mere passende løsning. Det er en indbygget funktion og er let tilgængelig fra dit dashboard.

gå til Jupiter > Temaindstillinger > avanceret > Brugerdefineret CSS eller Brugerdefineret JS sektion.

Bemærk, at når du tilføjer ekstern CSS eller JavaScript i temaindstillinger, kan du ikke tilføje en kode, der starter med <script></script> i brugerdefineret JS-sektion. Du skal fjerne <script></script> i din kode, fordi den kode, du skriver i sektionen Custom JS, allerede udgives med et <script></script> tag.

fordele:

  • bedste måde at tilpasse små ting med CSS og Javascript i Jupiter
  • bedste måde at tilføje små til mellemklasse CSS og Javacscript koder i Jupiter
  • ingen opsætning / installation kræves-det er allerede indbygget!

ulemper:

  • sværere at vedligeholde og opdatere
  • du kan ikke tilføje filer direkte (.css eller .JS filer eksternt), medmindre du kender kodningen.
  • du kan ikke vælge, om koden vil blive skubbet ind.

brug af et Plugin

Plugins er vores loyale hjælpere, mens du bruger . Du kan også tilføje dine koder med et plugin som Indsæt sidehoveder og sidefødder. Det er en fantastisk måde at tilføje dine koder til din hjemmeside, og det fungerer på samme måde som vores indbyggede funktion. Den gode ting med dette plugin er, at du kan vælge, om du vil tilføje din kode til sidefoden eller overskriftsområdet, hvilket undertiden er afgørende for nogle integrationer.

i modsætning til vores indbyggede løsning kan du tilføje<script></script > tags i Indsæt sidehoveder og sidefødder plugin.

fordele:

  • du kan vælge koden placering
  • godt alternativ til vores indbyggede løsning
  • hurtig og nem måde at tilføje Facebook eller brugerdefinerede Google Analytics koder.
  • fantastisk måde for tredjeparts integrationer

ulemper:

  • behov plugin installation / opsætning
  • svært at vedligeholde og opdatere
  • du kan ikke tilføje filer direkte som vores indbyggede løsning.

brug af undertema og Forespørgselsstil

brug af Undertemaet er det, vi anbefaler, hvis du vil foretage nogle mellemstore til store tilpasninger, fordi det er den sikreste måde at tilpasse din hjemmeside på. Med Child tema, vil du være i stand til at vedligeholde dine koder og opdatere dine centrale tema filer nemt.

du kan installere vores officielle Børnetema, eller du kan oprette dit eget. Du kan derefter begynde at tilføje dine CSS koder og tilpasse din hjemmeside med det samme i udseende > Editor. Men hvis du vil tilføje eksterne CSS-filer og Javascripts-filer, skal du ringe til det og skrive nogle koder i funktioner.php.

Sådan går det:

  1. gør din CSS-eller Javascript-fil klar, eller hvis det er en fjernkilde, skal du gøre linket klar.
  2. Opret en fil med navnet funktioner.php
  3. tilføj følgende kode i funktioner.php

<?php

funktion add_theme_codes () {

hv_style( ‘style’, get_stylesheet_directory_uri().’/min ekstern kode.css’, ‘alle’);

}

add_action (‘add_theme_codes’, ‘add_theme_codes” );

?>

med denne kode opretter du en ny handling til dit typografiark og kalder det fra mappen child-theme. Lad os sige, at du har en “brugerdefineret.css ” fil, der skal tilføjes til din hjemmeside.

tilføj den pågældende fil via FTP, og opret derefter en funktion.php-fil. Tilføj derefter koden ovenfor og ændre ‘/myeksternalcode.css ‘ til ‘ brugerdefineret.css ‘ eller hvad dit filnavn er. Endelig skal du tilføje dine funktioner.php til dit barn tema også.

her er et andet eksempel, hvis du ikke har en fil, men en fjernkilde skal tilføjes:

<?php

funktion add_theme_codes() {

ap_en_style( ‘style’, ‘ https://code.jquery.com/jquery-3.2.1.js’, ‘alle’);

}

add_action (‘add_theme_codes’, ‘add_theme_codes” );

?>

i eksemplet ovenfor brugte vi ikke get_stylesheet_directory_uri (), fordi kildefilen er fjern. Du kan også ringe til forskellige filer fra din server ved hjælp af links som dem ovenfor.

fordele:

  • bedst til alle former for tilpasninger
  • bedst til tredjeparts og komplekse integrationer
  • let at vedligeholde og redigere
  • du kan tilføje lokale eller eksterne filer direkte
  • en af de sikreste metoder til opdateringer

ulemper:

  • brug for en lille smule opsætning
  • kræver en lille smule kodningskendskab (eller i det mindste skal du være villig til at lære)
  • ikke den hurtigste måde til små tilpasninger

hvilken er den bedste mulighed for forskellige situationer?

hvis du vil foretage hurtige ændringer eller tilpasninger, vil Temaindstillinger være den bedste mulighed for dig. Men hvis du vil have mere fleksibilitet og kontrol over din kode og kodeplacering, og du stadig har små til mellemstore tilpasninger, vil Indsæt sidehoveder og sidefødder fungere godt for dig.

men hvis du vil foretage store tilpasninger, tredjepartsintegrationer, eller hvis du vil have et vedligeholdeligt udviklingsmiljø, er Undertemaet dit bedste valg. Hvis du har brug for yderligere hjælp til at tilføje ekstern CSS eller Javascript til din hjemmeside, kan du altid få hjælp fra Artbees Care.

Write a Comment

Din e-mailadresse vil ikke blive publiceret.