Kam vložiť tento kód vo WordPress? Všeobecná štruktúra súboru témy.
Ahojte chalani!
Dnes som sa rozhodol dotknúť témy, ktorá nikdy neprestane byť aktuálna medzi mladými tvorcami webstránok.
Po vytvorení stránok je vždy potrebné ich prispôsobiť. Časť nastavení sa vykonáva úpravou súborov nainštalovanej šablóny témy. Napríklad musíte vložiť kód, ktorý zobrazuje podobné položky. Ale kam to dať?
Takéto otázky kladú začiatočníci veľmi často. Znepokojujú ich aj ďalšie podobné body, ktorých riešenie je v podstate úplne rovnaké. Okrem toho sa vo svojich budúcich článkoch často uchýlim k vloženiu kódov na rôzne miesta v šablóne. Preto je tento materiál mimochodom viac ako kedykoľvek predtým.
V tomto článku vám ukážem, aké ľahké je pre vás určiť miesto vo vašej WordPress šablóne, kam potrebujete vložiť ľubovoľný kód. Zvážim aj ďalšie dôležité body, ktoré sa vás môžu týkať v počiatočnej fáze.
Začnime od začiatku a pozrime sa na súbory, ktoré možno budete musieť upraviť, ak chcete kódy vkladať manuálne, a nie pomocou doplnkov, pretože takáto možnosť existuje. Nevítam ho, no napriek tomu pre tých najväčších lenivcov takéto pluginy popíšem v nasledujúcich článkoch.
Na samom začiatku dávam video lekciu, pretože bez nej bude ťažké porozumieť prezentovanému materiálu textový formát nižšie.
Teraz všetko podrobne vysvetlím v textovom formáte.
Súbory zodpovedné za výstup každého typu stránky
Ak ste na iných blogoch čítali veľa článkov o implementácii niektorých funkcií pomocou kódov (skriptov), potom ste si 100% istý, že ste videli frázy ako:
Vložte tento kód do súboru zodpovedného za zobrazovanie záznamov a ďalších.
Existuje veľa súborov, do ktorých možno budete musieť vložiť kódy. Ale čo sú tieto súbory? Všetko je veľmi jednoduché.
Výstup hlavnej stránky - index.php;
Výstup záznamu - súbor single.php;
Výstup stránky - súbor page.php;
Výstup archívov a kategórií - archive.php;
Výstup päty - päta.php;
Výstup stránky vyhľadávania - search.php;
Výstup bočného panela - sidebar.php;
Súbor štýlu - style.css;
Výstupný súbor 404 stránok je 404.php.
Teraz, keď vám bude povedané, aby ste vložili kód do takého a takého súboru, budete vedieť, kde hľadať.
Zostáva len odpovedať na otázku, ako určiť správne miesto v každom zo súborov?
Určite, kam vložiť kód
Najprv si prejdeme tie miesta, ktoré netreba definovať. Budú rovnaké pre všetkých bez ohľadu na predlohu.
Na prvom mieste, identickom pre všetky šablóny, je oblasť v súbore Header.php. Toto sú otváracie a zatváracie značky
.
Medzi týmito značkami sú vždy umiestnené nejaké skripty, ktoré by mali fungovať pre všetky stránky webu. To znamená, že sme medzi tieto značky umiestnili skript, napríklad sociálne tlačidlá, a fungujú na všetkých stránkach webu, kde nakreslíme ich výstup.
Tieto značky sú umiestnené úplne hore v súbore Header.php.
Obsah medzi nimi bude pre každého iný, pretože všetko závisí od šablóny.
Ak vám povieme, aby ste tento kód vložili medzi otváraciu a zatváraciu značku hlavy, skopírujte kód, vyhľadajte podobnú oblasť v súbore šablóny a jednoducho ju vložte medzi tieto značky.
Druhé miesto, ktoré je tiež identické pre všetky šablóny, je vo výstupnom súbore päty – footer.php.
Skripty je možné spájať nielen vložením medzi tagy
v súbore Header.php. Môžete ich načítať aj cez súbor footer.php, čím urýchlite načítanie stránky webu.
Faktom je, že keď sa stránka začne načítavať, načítava sa zhora nadol. Ak sú všetky skripty v hornej časti stránky, zobrazenie jej obsahu sa spomalí, pretože načítanie skriptov bude chvíľu trvať.
Našou úlohou je čo najrýchlejšie ukázať obsah stránky návštevníkom aj vyhľadávače. V tomto prípade je vhodné načítať skripty na samom konci stránky, aby sa najskôr zobrazil obsah, a potom načítať všetko ostatné.
Ak chcete implementovať túto možnosť, musíte otvoriť súbor footer.php a prilepiť skript pred koncovú značku tela. Nachádza sa na konci obsahu súboru, pretože je zodpovedný za koniec oblasti stránky.
Ako vidíte, zobrazil som všetky skripty v tejto oblasti pred záverečnou značkou
(zvýraznené modrou farbou). Mimochodom, priniesol som ich načítaním zo súborov, a nie umiestnením samotných skriptov do tejto oblasti. Potom som výrazne urýchlil prácu blogu. Ako to urobiť, bude samostatný článok. Počkaj!
Dúfam, že keď vám povedia, aby ste vložili kód do týchto oblastí, urobíte všetko bez problémov.
Prejdime k zložitejšej problematike a skúsme sa naučiť, ako určiť miesta v iných súboroch šablón, kde sú vložené rôzne iné kódy. Tieto kódy zvyčajne zahŕňajú:
Zobraziť súvisiace príspevky;
výstup predplatiteľského formulára;
Výstup sociálnych tlačidiel a tak ďalej.
Všetky tieto veci sa vkladajú za hlavnú časť obsahu, teda za koniec článku. Každý má iný kód šablóny a teda univerzálnu odpoveď na otázku "Kde skončí môj výstupný kód článku?" jednoducho nie.
Ale môžete ľahko určiť koniec kódu, po ktorom musíte implementovať funkciu, ktorú potrebujete. Čiastočne túto metódu Už som ukázal v článku o Voľba WordPressšablóna (). Následne som použil štandardnú funkcionalitu internetového prehliadača.
Pre lepšie pochopenie podstaty tejto metódy dôrazne odporúčam pozrieť si video na začiatku tohto príspevku. V ňom som ukázal, ako sa všetko deje v reálnom čase. No a teraz sa pokúsim opísať čo najzrozumiteľnejšie.
Ukážem vám to na príklade Prehliadač Google Chrome. V iných prehliadačoch danú funkciu tiež k dispozícii, môže sa nazývať trochu inak.
Princíp v 3 prehliadačoch je podobný. Teraz ukážem, ako sa určuje výstupné umiestnenie akejkoľvek oblasti v akejkoľvek šablóne.
Prejdite do zobrazenia kódu prvku (Google Chrome). Kliknite kliknite pravým tlačidlom myši prejdite myšou na prázdnu oblasť stránky.
Potom sa v spodnej časti stránky objaví panel, ktorý zobrazuje celý zdrojový kód stránky, ktorý môžeme upravovať a vidieť, ako sa bude meniť štruktúra a vzhľad šablóny v reálnom čase. Zmeny údajov sa však neuložia. Ak to chcete urobiť, musíte upraviť samotné súbory šablón.
Takto ten panel vyzerá.
Šípkou som ukázal na lupu, kliknutím na ktorú si môžeme prezrieť štruktúru šablóny a určiť, z ktorých blokov sa naša šablóna skladá. Túto funkciu nazývam inšpektor.
Po kliknutí na inšpektor môžeme prejsť myšou na našu stránku a uvidíme, že všetky prvky, nad ktorými prejdeme, sa začnú zvýrazňovať farebným pozadím. Ako príklad uvediem snímku obrazovky z článku o výbere šablóny. Tam som kurzorom myši nad názvom príspevku.
Ak potrebujeme vložiť kód po výstupe nášho článku, potom je ľahké uhádnuť, že musíme skontrolovať oblasť našej šablóny a nájsť blok, ktorý obsahuje celý obsah článku. Môžete hľadať koniec aj začiatok bloku. To znamená, že šablónu môžete kontrolovať zdola aj zhora.
Ale je tu jedna poznámka.
. Musíme nájsť nielen riadky článku, ale aj bloky, v ktorých sa nachádza samotný obsah, pretože v súboroch šablón nie sú žiadne články. Existuje iba kód, ktorý zobrazuje obsah a je uzavretý v blokoch. Hneď po značke uzatváracieho bloku a budete musieť vložiť kód.
Čo teda robíme? Klikneme na ikonu lupy a začneme s obhliadkou oblasti, v ktorej sa nachádza náš článok. Je potrebné nájsť takú časť stránky, keď je zvýraznená oblasť celého článku. Toto bude blok, ktorý zobrazuje obsah.
Ako príklad som vytvoril nový článok s malým obsahom, aby som ukázal, ako bude daný blok zvýraznený.
Kliknutím musíte nájsť aj blok, ktorý obsahuje váš obsah. Po umiestnení kurzora myši uvidíte malý popis s názvom daného bloku.
Keď nájdete takúto časť šablóny, kliknite na tlačidlo myši a táto časť sa stáva aktívnym. Na paneli zobrazenia kódu prvku sa riadok kódu s týmto blokom automaticky zvýrazní.
Ako vidíte, tento blok má presne rovnaký názov ako v popise pri umiestnení kurzora myši.
Keď poznáme názov bloku, v ktorom je zobrazená hlavná časť článku, môžeme prejsť do potrebného súboru a za tento blok vložiť potrebný kód. Vezmime si ako príklad výstupný súbor záznamu (single.php).
Otvorím ho v editore poznámkového bloku a hľadám riadok v kóde, ktorý začína presne rovnako ako na paneli zobrazenia kódu prvku.
Práca v editore Notepad je veľmi pohodlná, pretože pri kliknutí na úvodnú značku bloku sa vyberie aj uzatváracia značka (zobrazená na obrázku vyššie). Záverečná značka označuje, že toto je koniec výstupu obsahu. Práve za ním môžeme vkladať naše sociálne tlačidlá, súvisiace príspevky a ďalšie funkcie.
Práve som tam vložil sociálne tlačidlá spolu s formulárom na odber aktualizácií.
Sú zobrazené na stránkach.
Podobne prebieha vkladanie do iných súborov šablón (stránok, nadpisov, archívov...).
Bez praxe túto metódu vkladania pravdepodobne text a obrázky nezvládnu. Preto ho vezmite a vyskúšajte. Som si istý, že všetko bude fungovať. Pomôže aj video na začiatku článku.
O určení miesta v súbore šablóny pre následné vloženie do neho, keď ho budete potrebovať, som na to prišiel.
Zostala posledná chvíľa, ktorý stojí za to posvätiť v tomto odseku.
Existuje pomerne veľa nastavení, ktoré vyžadujú zásah do súboru functions.php šablóny. Musíte však tiež pochopiť, ako do neho vložiť kódy.
Spravidla na všetkých blogoch píšu, že vkladanie by sa malo vykonať na samom konci súboru, pred záverečnou značkou?>.
Ale čo ak táto značka nie je v súbore? Ja na to napríklad jednoducho nemám. Ako byť v takejto situácii? Neprítomnosť uzatváracej značky neznamená, že súbor je neplatný. Blog funguje. Takže všetko je v poriadku.
V tomto prípade navrhujem urobiť opak - vložiť ho do kódu na úplný začiatok súboru pred otváraciu značku. Pozrite sa na obrázok nižšie.
Úvodná značka je zvýraznená červenou farbou a vložený kód je zvýraznený modrou farbou.
Toto je jedna možnosť. Kód môžete vložiť aj na koniec súboru, ale pred posledný kód. V tomto prípade musíte aspoň trochu pochopiť, kde začína posledný kód, aby ste ho neodrezali.
To je všetko. Ak zrazu máte rovnakú situáciu s absenciou uzatváracej značky v súbore funsctions.php, potom budete vedieť, ako postupovať.
Definovanie vizuálnych štýlov v šablóne
Sami si tiež môžeme prezerať štýly dizajnu prvkov stránky a meniť ich, ako aj pridávať vlastné. S tým pomáha ten istý inšpektor prvkov.
Keď nájdeme požadovaný prvok a klikneme naň, v pravej časti panela zobrazenia kódu sa zobrazia štýly pre vybraný blok (prvok). Ukážem štýly pre rovnaký blok článku diskutovaného vyššie.
Ak chceme tieto štýly upravovať v reálnom čase a vidieť, ako bude ten či onen prvok vyzerať, môžeme ich zmeniť priamo v tomto paneli. Stačí kliknúť na hodnoty požadovaných štýlov a zmeniť ich.
Zmeny však budú platné len do 1. obnovenia stránky. Ak chcete použiť tieto štýly, musíte ich pridať do súboru štýlov šablóny. Na jednom z obrázkov vyššie som s modrým okrajom ukázal oblasť, ktorá zobrazuje názov súboru, kde sú tieto štýly napísané, ako aj presný riadok, na ktorom začínajú.
Preto otvoríme súbor style.css a hľadáme v mojom prípade riadok 890.
Tu ich môžete upraviť. Uložte súbor a nahrajte ho na hosting.
Podotýkam, že upravujem všetky súbory v počítači. V tomto prípade používam externé programy, čo umožňuje zrušiť akékoľvek zmeny, ak sa vyskytnú záseky. To isté platí pre rôzne experimenty s kódmi a skriptami – všetko je zapnuté .
Dôrazne vám odporúčam vykonať podobnú úpravu akýchkoľvek súborov vo vašom počítači. Ak to chcete urobiť, musíte najprv stiahnuť súbory do počítača z vášho hostingu pomocou ftp klienta. Písal som o tom v . A potom stačí otvoriť súbory pomocou ľubovoľného vhodného editora, ktorý ich dokáže otvoriť. Na tento účel používam Poznámkový blok.
Tento článok sa skončil. Tu je taký zložitý proces určenia miesta, kam potrebujete vložiť nejaký kód alebo skript. Na prvý pohľad sa tento postup môže zdať komplikovaný. Ale všetko je veľmi jednoduché. Skúste to niekoľkokrát a nebudete klásť takéto otázky.
Samozrejme, môžete vložiť kódy a skripty na svoj blog pomocou špeciálnych pluginov, ktoré určite zvážim v budúcich článkoch. Aby ste sa však vyhli ich používaniu, môžete takéto akcie vykonávať bez nich, čo odporúčam. Tým sa zbavíte dodatočného zaťaženia stránky, čím ju urýchlite a uľahčíte jej používanie pre vašich návštevníkov.
Všetci priatelia. Týmto končím. Teším sa na vaše otázky v komentároch. Všetko vymyslíme. Uvidíme sa v novom obsahu.
S pozdravom Konstantin Khmelev.
Samozrejme, nie každý potrebuje tieto informácie, ale iba tí, ktorí sa na svojich stránkach podelia s čitateľmi o svoje osvedčené postupy pri vyberaní kódu (prečítajte si útroby webu) a niektorých jeho vylepšeniach prostredníctvom ... no, rozumiete zásah do "genetiky"! Čo si si myslel?
Pri pohľade do budúcnosti, kým som nezačal hlavný príbeh, môžem vám povedať, že sa budem naďalej venovať tomu, o čom budem písať a čo sa vám s veľkou pravdepodobnosťou môže hodiť, ak máte na webe aj svoj vlastný zdroj kreativity na klávesnici. . A preto vám odporúčam sledovať vydávanie nových článkov, aby ste nepremeškali vydávanie prváčika. Najmä ak ste to ešte neurobili, zaujímalo by ma prečo?
A teraz, moje drahé krásky, to začína – príbeh.
Môže vyvstať rozumná otázka, ale musí sa pôžička vo všeobecnosti obťažovať vložením kódu? Prečo potrebujete urobiť nejaký druh zvýraznenia kódu a prečo ho nemôžete jednoducho vložiť, ako napríklad text?
A všetko je jednoduché - ak sa pokúsite vložiť kód len tak, tak namiesto zobrazenia sa niekedy spustí a vykoná všetky funkcie, na ktoré bol určený, navyše priamo tam, kde ho vložíte. Zo všetkých týchto „kúzel“ môže stránka „plávať“, môže sa „krútiť“ a samotný článok sa zmení na niečo nepochopiteľné a niečo uprostred - škaredé! Áno, a samotný kód vo svojej „holej“ podobe, nie veľmi čitateľná „podívaná“, ktorá na nepripravený pohľad môže predstavovať nestráviteľnú substanciu, z ktorej sa môže u diváka vyvinúť až nechuť čokoľvek pochopiť a ponoriť sa do podstaty. toho, čo sa deje. Skrátka nie je! Áno, môžete sa o tom presvedčiť, ak sa pozriete napríklad na obrázok v kóde:
Aby to bolo “to”, je viacero možností a konkrétnejšie 3. Pokúsim sa všetko popísať, ako som sľúbil na začiatku a vy sami sa rozhodnete, ktorá bude pre vás výhodnejšia a príjemnejšia na realizáciu a vnímanie.
Ako krásne a správne vložiť html kód do tela článku.
Možnosť #1 - zvýraznenie kódu prostredníctvom doplnku WP-Syntax.
Presnejšie povedané, táto možnosť je implementovaná prostredníctvom skupiny dvoch doplnkov - pre jednoduché použitie. Prvá časť zväzku sa nazýva: WP-Syntax a plní hlavnú funkciu. A druhá časť je servisná a volá sa WP-Syntax Button, ktorá vykonáva prácu stlačením tlačidla, ktoré vám práve toto tlačidlo pridá na palubnú dosku editora wordpress. Stiahnite si obe časti tohto balíka buď pomocou vyhľadávania v administračnom paneli blogu podľa mena, alebo zo stránok úložiska nástroja. Stránka úložiska pre WP-Syntax je tu. A stránka pre tlačidlo WP-Syntax Button . Nie sme v autobuse, však?
Inštalácia je štandardná – nájdená, stiahnutá, aktivovaná. Upozorňujeme, že doplnok Button nebol aktualizovaný viac ako dva roky a neexistujú žiadne údaje o jeho kompatibilite s vaším Nová verzia WordPress, ktorý vás môže upozorniť. Ak vás táto okolnosť znepokojuje, nemôžete si tlačidlo stiahnuť a vystačiť si iba s prvou časťou balíka - bude to tiež fungovať, len menej pohodlné. Za seba môžem povedať, že používam celú sadu a všetko funguje.
Ak všetko nainštalujete, na paneli editora budete mať nové tlačidlo „Kód“.
Ak chcete vložiť kód cez tento doplnok, musíte ho najskôr vložiť vo vizuálnom (normálnom, kde píšete), vybrať ho myšou a potom kliknúť na tlačidlo „Kód“ a z rozbaľovacej ponuky vybrať jazyk, ktorý zodpovedá vášmu kódu. zoznam. Zároveň môžete nastaviť číslovanie riadkov zadaním čísla prvého v poli Číslo riadku. Po výbere stlačte Vložiť.
Zároveň po uložení / aktualizácii príspevku / stránky uvidíte niečo ako tento obrázok s vašim krásne vloženým obrázkovým kódom, napríklad:
Ak ste nenainštalovali časť WP-Syntax Button, potom budete musieť na vloženie kódu použiť túto kombináciu kódu:
Tu zadajte svoj kód
Kde, Jazyk je jazyk vášho kódu. Túto kombináciu je potrebné vložiť do editora HTML a zadať kód. Zoznam podporovaných jazykov je na tejto stránke doplnku. Možnosť vloženia kódu takto nie je príliš pohodlná, ale niekto ju môže potrebovať. Výsledkom bude niečo také:
1
Tu zadajte svoj kód
Možnosť č. 2 - Zvýraznenie syntaxe prostredníctvom doplnku SyntaxHighlighter Evolved, ktorej názov sa presne traduje. Môžete si ho stiahnuť vyhľadaním názvu na paneli správcu blogu alebo z tejto stránky doplnku. Inštalácia je štandardná. Tento plugin funguje ako predchádzajúci, ale menej pohodlným spôsobom.
Po inštalácii budete mať v menu položku Settings> SyntaxHighlighter, kde budú všetky jeho nastavenia. Áno, zabudol som povedať, že plugin je v angličtine a nie v ruštine - nevýhoda. Ak niečo nie je jasné, použite preklad stránky.
Nastavenia pluginu je možné ponechať v predvolenom nastavení – sú funkčné. Alebo môžete nastaviť hodnoty, ako na obrázku s príkladom mojich nastavení:
Ak ste zmätení, potom v nastaveniach existuje tlačidlo reštart to Defaults - obnovenie nastavení na pôvodné. A tiež v spodnej časti stránky pod tlačidlami je náhľad na zobrazenie kódu - môžete sa pokojne pohrať a zvoliť si vlastnú verziu nastavení a výstupu kódu. K dispozícii je zoznam podporovaných jazykov a ďalšie Detailný popis jeho nastavenia - všetko je v ruštine, prídete na to.
Ak chcete vložiť html alebo php kód v položke stránky s týmto doplnkom musíte použiť jednu z konštrukcií z príkladu na stránke nastavení doplnku (úplne dole):
Pri písaní príspevku sa prepnite do HTML editora, vyberte požadovaný parameter jazyk z príkladu, vložte ho a vložte svoj kód dovnútra. Dopadne to asi takto:
Tu zadáte svoj dlhý kód
Možnosť číslo 3 - vložte html alebo php kód bez pluginu.
Ak sa chcete zaobísť bez doplnku a vložiť html kód do tela blogu, musíte ho uzavrieť do nasledujúceho kódu:
TU VLOŽTE SVOJ KÓD
Kde výška a šírka sú výška a šírka výstupného poľa s kódom v pixeloch, farba je farba. Farbu si môžete vybrať s pipetou, o ktorej som už písala. Šírka a výška sa dajú upraviť podľa parametrov vašej stránky. Výstup bude asi takýto:
Vzhľadovo a funkčne je, samozrejme, menej pekná, no nezaťažuje blog doplnkové doplnky aj keď sám to nepoužívam. Priviedol ho pre zmenu.
Myslím, že teraz sa rozhodnite, ako krásne vložiť html kód do blogu.
Tu končím svoje rozprávanie. Dúfam, že som pre vás dnes urobil niečo dobré. Ďakujem za prečítanie.
Trochu pozitívne:
Klikanie na sociálne tlačidlá a komentáre sú vítané!
Postupujte podľa tlačidiel, povedzte o článku svojim priateľom - toto je za peniaze!
Okrem toho by som chcel okamžite objasniť, že kód vložíme do samotného článku, aby si ho naši čitatelia mohli skopírovať bez toho, aby strácali čas písaním samotného textu. Zvýšime teda pohodlie () nášho zdroja - tentoraz. Áno, a články budú vyzerať profesionálnejšie a dokončenejšie - to sú dva.
Chcel by som tiež poznamenať, že informácie v tomto článku budú užitočné pre ľudí, ktorí, ako vám hovoríme, ako vytvoriť rôzne druhy doplnkov na webe, alebo pre používateľov, ktorí chcú len zdieľať užitočná informácia. A nezáleží na tom, že táto informácia je kód 🙂 Mimochodom, prezradím malé tajomstvo tento projekt vydáme ho pomocou doplnku Wp-Syntex.
Pýtate sa: "Prečo to používame?" Odpoveď je jednoduchá – pre chuť a farbu neexistujú súdruhovia. vtip. V skutočnosti sme si vybrali tento plugin, pretože sa ľahko používa, dokonale pridáva vizuálny štýl rôznym programovacím jazykom (css, html, java, javascript, perl, sql atď.) a nezaťažuje náš server.
No, keďže som to nechal ujsť o Wp-Syntex, poďme to použiť ako príklad, ktorý ukáže, ako vložiť kód do článkov WordPress.
Najprv musíte nainštalovať tento plugin. O tom, ako to urobiť, sme hovorili v článku o .
Preto opísať túto akciu nebudem tu.
V dôsledku toho budete mať nasledujúci výstup:
Kód, ktorý chcete zobraziť
Tiež namiesto php v tomto kóde môžete vložiť iný programovací jazyk, ako je css alebo java. Zároveň ten styling vzhľad zmení sa.
Ďalšie funkcie Wp-Syntex
Ak pridáte atribút k úvodnej značke „pred“. riadok, to znamená, že kód, ktorý budete musieť prilepiť, bude začínať takto:
Kód, ktorý chcete zobraziť
Dúfam, že si všimneš rozdiel.
Je tu ešte jeden malý atribút, ktorý možno budete potrebovať – toto je unikol. Umožňuje vám konvertovať html kódy znakov priamo na samotné znaky. Napríklad „>“ sa skonvertuje na „>“. Aby táto funkcia fungovala, vložte do otváracej značky „pre“ nasledujúci atribút:
escaped="true"
V súlade s tým bude značka začínať takto:
<
pre lang=
"php"
line=
"1"
escaped=
"true"
>
Aj na internete som našiel informáciu, že si môžete nainštalovať ďalší plugin (WP-Syntax Button), ktorý funguje v spojení s naším pluginom a pridáva do WP editora tlačidlo na vloženie kódu. Nelenil som a rozhodol som sa to otestovať.
Hneď pri inštalácii ma upozornila skutočnosť, že nebola dlho aktualizovaná a nebola testovaná s našou verziou WordPress. No čo môžem povedať, moje obavy boli oprávnené.
Po aktivácii tlačidla WP-Syntax Button som sa v jednom z našich článkov rozhodol vložiť java skript. Urobil som všetko tak, ako bolo naznačené v tom kope návodov a odporúčaní. Vložte skript do článku, zvýraznite ho a stlačili tlačidlo „kód“.
Potom uviedol programovací jazyk a číslo riadku, od ktorého by mal začať výstup skriptu.
Možno sa pýtate, prečo som o tomto experimente písal v tomto článku? Týmto som chcel povedať, že keď budete hľadať nejaké informácie na internete, dajte si pozor na dátum zverejnenia. Koniec koncov, existuje veľmi vysoká pravdepodobnosť, že informácie v starom článku boli relevantné pred niekoľkými rokmi a ďalej tento moment jednoducho to nefunguje a jeho použitie alebo implementácia môže vystaviť váš projekt zraniteľnosti.
Na našom blogu sa snažím udržiavať všetok materiál aktuálny, neustále sledovať aktualizácie a v prípade potreby upravovať už napísané články.
Ak chcete dostávať aktuálne informácie o email potom odporucam.
Video „Ako vložiť HTML kód do článku“
Priatelia, ak chce niekto radšej vidieť, ako sa to robí, nahral som pre vás video. A pripomínam, že máme aj youtube kanál, na odber ktorého sa môžete tiež prihlásiť.
Súvisiace články:
Dúfam, že článok nebol zložitý a mohol som vám podrobne povedať, ako môžete na stránku vložiť html kód bez zbytočných problémov.
Nezanedbávajte estetiku svojho blogu. Náš čitateľ sa totiž ako v živote stretáva podľa oblečenia, no rozhliada rozumom.
To je z mojej strany všetko!
čau čau!
S pozdravom Anton Kalmykov
Zdravím všetkých čitateľov a predplatiteľov! tí, ktorí sa nimi nestihli stať - prosím, aby ste sa odo mňa ako prví dozvedeli o nových príspevkoch na stránke Videoblogu
Takže, druhý deň som narazil na problém, nemohol som vložiť html kód na stránku, hľadal som cez Google, Yandex a dokonca aj vyhľadávanie pošty, ale nenašiel som konkrétnu odpoveď na moju otázku, ako to urobiť Páči sa ti to.
je to veľmi jednoduché, stačí použiť značku textarea + použiť Extra možnosti výška, šírka a výplň
Dajme si v tom poriadok ako a čo. Vo wordprese môžete jednoducho vložiť potrebný kód do vizuálneho editora a zobrazí sa takto:
»alt="Automatický systém zarábania peňazí"/>
Ale ako vidíte, kód sa nezobrazuje krásne a nie je veľmi vhodné ho kopírovať. Takže na implementáciu takýchto úloh musíte použiť značku:
.
Pamätajte tiež, že táto značka musí byť vložená do textový editor nielen na wordpress engine, ale na akomkoľvek motore.
Je potrebné vziať do úvahy a použiť ďalšie značky, ktoré pridávajú parametre odsadenia z horného riadku style=margin: 2px; Tiež parameter výšky: výška: 40px; a samozrejme parameter šírky: šírka: 660px
Teraz zhrniem, čo som napísal. Pri otváraní kódu
A nakoniec, ako som sľúbil, pripájam Cheat Sheet:
Ako vložiť html kód do html stránky? —————————————
Skopírujte značku do poznámkového bloku a medzi prilepením nižšie uvedeného kódu, pričom nahradíte odkaz na vašu stránku a odkaz na váš banner
Poznámky pod čiarou:
*- značka, ktorá vám umožňuje vložiť ľubovoľnú značku HTML na ľubovoľnú webovú stránku
*štýl- parameter zodpovedný za štýl, veľkosť, farbu textu vo vnútri značky
* okraj: 5px- parameter odsadenia
* šírka: 660px- parameter šírky
* výška: 80px;- výškový parameter
To je všetko, milí priatelia, prihláste sa na odber RSS kanála a tiež na odber môj youtube kanál Dobrú náladu vám všetkým. 🙂
o autorovi
Mnohí asi nechápu, prečo som pomenoval svoj blog Sociálny výťah z tmy na slnko Potom poviem a vysvetlím. Internet je pre mňa výťah, do ktorého sa ponorím na úroveň zručností, zručností a zárobkov, ktoré potrebujem; ale spoločenský, pretože je pre ľudí, pre spoločnosť, pre tých, ktorí si želajú, pre tých, ktorí sú veľmi podobní mojej vízii. Tmavý- toto je somarina, alebo inak povedané, dno obyčajného života, v ktorom som bol ja, v ktorom je dnes už veľa ľudí, áno, asi polovica ľudí u nás je v tomto somarine, ktorí si myslia, že toto je čajka, ale nie ... slnko- to je to, čo dáva život úplne všetkému živému na planéte, vrátane nás. Keby nebolo slnka, nebol by ani život. slnko je energia pre život. A aby som to všetko zhrnul, InternetLIFT je príležitosť bežných používateľov Internet, ktorí pracujú pre môjho strýka, majú finančné problémy, snívam o zbohatnutí, ale nevedia, kde začať. Internetový výťah je platforma, ktorá pomôže tým, ktorí sa chcú mierne alebo výrazne orientovať v zložitosti a schémach zárobku. Budú sa môcť naučiť, kde začať, kam ísť a ako sa stať vlastným šéfom. Dúfam, že moje rady a články pomôžu vám aj mne. Keďže jedného dňa pochopíš, prečo blogujem, ak niečo vieš, má to cenu len vtedy, keď si to zapamätáš. A keď budete nahrávať a zdieľať, bude to navždy, vrátane vašej pamäti!!!
Dobrý deň milí priatelia. Dnes, pokračujúc v téme zrýchlenia načítania blogu, si povieme niečo o možnosti nahradenia pluginov „light“ skriptami. Skripty, na rozdiel od pluginov, majú oveľa nižšiu záťaž na serveri, a preto bude rýchlosť načítania stránky vyššia. K dnešnému dňu existuje veľa pluginov a sú schopné vyriešiť veľa úloh blogerov. Často však môžu byť tieto doplnky nahradené prácou rýchlejších skriptov. A niekedy dokonca zakázať nepotrebné doplnky. A čím menej doplnkov tretích strán, tým vyššia je rýchlosť načítania stránky alebo blogu.
Ak analyzujete rýchlosť načítania stránky, môžete zistiť, ktorý z doplnkov spomaľuje rýchlosť načítania vašej stránky. Aké služby použiť na overenie som napísal. V mojom prípade je najväčšou brzdou plugin, ktorý umožňuje zobraziť príklady zdrojový kód v článkoch so zvýraznením syntaxe práve tohto kódu. Tento plugin sa nazýva SyntaxHighlighter.
Výsledok testu sa nezmestil ani na stránku. Samozrejme, zvýraznenie kódu je veľmi krásne, ale ak sa na to pozriete, nie je to o zvýraznení. Vo všeobecnosti je efektívnosť kódu dôležitá. A ak je kód jednoducho vložený, potom je pravdepodobnosť jeho nefunkčnosti vysoká.
A dnes vám poviem, ako nahradiť doplnok SyntaxHighlighter bežným kódom a dokonca vložiť tlačidlo do panela úprav vášho blogu.
Ako zadať kód do článku bez pluginu
Je známe, že vo WordPress na zobrazenie príkladu zdrojového kódu v článku stačí pri písaní článku prejsť do testovacieho editora a uzavrieť požadovaný kód do značiek
Váš kód
Takýto kód však len ťažko vynikne vo veľkom texte vášho článku. A tak môžete pridať niekoľko štýlov, povedzme farbu pozadia, písmo, rám a podobne. Váš kód bude teda najjasnejšie prezentovaný vo forme príkladu.
Ako zmeniť typ zobrazeného kódu
Urobiť to je celkom jednoduché.
možnosť 1
Môžete priradiť značku
Class, napríklad class="cod" a set požadované štýly v súbore style.css..cod ( width: auto ; background-color: whitesmoke ; border: 1px solid #C7C3C3 ; border-radius: 5px ; color: #167dec ; )
Možnosť 2
Štýly môžete nastaviť aj priamo pri vkladaní kódu. Bude to vyzerať asi takto:
Váš kód
A v prvom a druhom príklade, ak sa vložený kód dostane von z článku, mali by ste pridať pretečenie vlastnosti: auto; ktorý vám umožní ovládať blokový prvok.
Tieto metódy sú dobré pre každého, ale chcel by som niečo jednoduchšie. Vo všeobecnosti opäť lenivosť - motor pokroku vás núti prísť s niečím, čo tento proces uľahčí.
Ako pridať tlačidlo "Vložiť kód" na panel úprav WordPress
Tento proces uľahčí jednoduché tlačidlo na paneli úprav WordPress. A ona vyzerá takto.
Ak si chcete nainštalovať takéto tlačidlo pre seba, budete potrebovať niekoľko minút svojho času a niekoľko súborov odo mňa. Tak poďme na to.
Načítava...