Ukážka wordpressu.

Vyhľadajte na stránke

Hľadať

Vyberte operačný systém

Ako ste už uhádli, dnes pri rolovaní na WordPresse neustále pribúdajú nové položky.

Namiesto navigácie back-to-back sa položky budú zobrazovať automaticky pri posúvaní.

Je možné pridávať nové položky bez opätovného nahrávania pomocou AJAX.

To všetko zvládneme bez použitia akýchkoľvek pluginov.

Teraz ukážem dva spôsoby takéhoto zlepšenia.

V podstate ide o rovnakú metódu, len trochu s inými právomocami.

Možnosti sa aktivujú buď automaticky pri rolovaní, alebo po stlačení tlačidla, napríklad – Zobraziť viac.

Čo je pre vašu stránku najvhodnejšie, je len na vás.

#load_more_gs( width: 53px; padding:50px 0; margin:0 auto; ) .cssload-container( position:relative; ) .cssload-whirlpool, .cssload-whirlpool::before, .cssload-whirlpool : absolute; horná časť: 50 %; vľavo: 50 %; okraj: 1px pevný rgb(255,255,255); border-left-color: rgb(0,225,255); border-radius: 974px;

-polomer-okraja: 974px; -webkit-border-radius: 974px; -moz-border-radius: 974px; ) cssload-rotate 1150ms lineárne nekonečno;-o-animácia: cssload-rotate 1150ms lineárne nekonečné;-ms-animation: cssload-rotate 1150ms lineárne nekonečné;

rotácia 1150 ms lineárne nekonečno; ) .cssload-whirlpool::before ( content: ""; margin: -22px 0 0 -22px; cssload-rotate 1150 ms lineárne nekonečno; -ms-animation: cssload-rotate 1150 ms lineárne nekonečné; -webkit-load-animation: css 1150 ms lineárne nekonečno; -moz-animation: cssload-rotate 1150 ms linear infinite ) .cssload-whirlpool::after ( content: ""; okraj: -28px 0 0 -28px; výška: 55px; šírka: 55px; animácia: cssload; -rotácia 2300ms lineárna nekonečná -ms-animácia: cssload-rotácia 2300ms lineárna nekonečná; -webkit-animácia: cssload-rotácia 2300ms lineárna nekonečný; otočiť ( 100 % ( -o-transform: otočiť (360 stupňov); ) ) @-ms-keyframes cssload-rotate ( 100 % ( -ms-transform: rotation( 360deg); ) ) @ -webkit-keyframes cssload-rotate ( 100 % ( -webkit-transform: rotation(360deg); ) ) @-moz-keyframes cssload-rotate ( 100% ( -moz-transform: rotation(360deg) ; ) )

Croc 3

Teraz potrebujeme asynchrónny animačný skript.

Sú tu dva smery.

Alebo vložte skript do päty a stlačte ho do značiek:

//tu je skript

Funkcia my_scripts_method() ( wp_deregister_script("jquery"); wp_register_script("jquery", "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"); wp_enqueue_script("j ) ;) add_action("wp_enqueue_scripts", "my_scripts_method");

Možnosť 3

Najpopulárnejšou a takzvanou „drsnou“ možnosťou pripojenia jQuery je napísať správu do súboru šablóny header.php do stredu značky.

Vložíme nasledujúci html kód:

2. Zavantazhivo obrázok pred-zavantazhuvach

Počas chladiaceho obdobia, keď je server požiadaný, aby použil AJAX, musíme ukázať obrázok, ktorý informuje zákazníka, čo sa deje.

Takéto obrázky boli skandované v pozadí viac ako raz, alternatívou k takémuto obrázku je text: „Zamilovanosť...“.

Ak máme takýto obrázok, stiahneme si ho napríklad odtiaľto: Animovaný gif (služba mi vyhovuje), premenujeme ho na ajax-loader.gif a vložíme do priečinka obrázky, ktorý je v katalógu našich WordPress tém.

V dôsledku toho môžeme získať nasledujúci obrázok: http://example.com/wp-content/themes/twentyten/images/ajax-loader.gif.

Nižšie mi jogo vikoristovamo u kódu.

3. Vytvorte bežnú šablónu stránky

Pre bežné stránky vo WordPresse môžete použiť šablóny okolo nich, takže môžeme vytvoriť stránku, ktorá je úplne odlišná od štruktúry ostatných stránok.

Ak chcete nastaviť WordPress tak, aby vytvoril súbor ako šablónu pre bežnú stránku, musíte do hornej časti súboru napísať nasledujúci kód:

Šablóna archívov je názov našej šablóny, ktorú používame v administračnom paneli WordPress pri vytváraní novej stránky.

Vytvorme nový súbor pre priečinok s názvom tpl_archive.php a vložíme tam navádzací kód.

Potom poďme na administračný panel WordPress a vytvorte trvalú stránku, rozpoznajte ju a vytvorte šablónu.

Teraz tento súbor uložíme s potrebným kódom.

1. Najprv musíme zobraziť rozbaľovacie zoznamy, ktoré môžeme vytvoriť pomocou doplnkovej funkcie WordPress: wp_get_archives() a wp_dropdown_categories():

3. Pridajte kód JavaScript, ktorý sa stiahne na server a vloží sa do bloku archive_pot (kód sa pridá za štýly css):