Trucuri cu linkul „citește mai mult”. Ascunderea și afișarea textului suplimentar - plugin jQuery Cum să eliminați #mai mult dintr-un link

Un plugin care vă permite să ascundeți o parte a textului dacă depășește o lungime specificată. Se adaugă un link, de obicei sub forma unui buton „Mai multe detalii” - când se face clic, textul ascuns este afișat.

Compatibil cu versiunile jQuery mai mari decât 1.7.0

JS

Un simplu apel de plugin:

$(„articol”). readmore();

Poate fi apelat cu opțiuni suplimentare:

$(„articol”). readmore(( viteza: 75, înălțime max: 500 ));

Opțiuni

• viteză: 100 (în milisecunde)
• maxHeight: 200 (în pixeli)
• înălțimeMargină: 16 (în pixeli, evită spargerea blocurilor care sunt doar puțin mai mari decât înălțimea specificată - maxHeight)
• mai multLink: "Mai multe detalii"
• lessLink: "Ascunde"
• încorpora CSS: true (inserează stiluri CSS dinamice, setați false dacă veți include singur toate stilurile în fișierul dvs. de stiluri)
• secțiunea CSS: "afișare: bloc; lățime: 100%;" (setează stilul blocului)
• startOpen: false (în mod implicit blocul este ascuns, dacă parametrul este adevărat - textul va fi afișat în întregime, dar cu capacitatea de a ascunde)
• expandedClass: „readmore-js-expanded” (clasa adăugată la blocul extins)
• collapsedClass: „readmore-js-colapsed” (clasa adăugată la blocul restrâns)
• beforeToggle: function() () (funcție apelată după ce ați făcut clic pe butonul „Detalii” sau „Ascunde”, dar înainte ca blocul să fie restrâns sau extins)
• după Comutare: function() () (funcție apelată după ce blocul este extins sau restrâns)

Dacă un element are o înălțime maximă setată în stiluri CSS, atunci pluginul va folosi exact această valoare, și nu valoarea opțiunii maxHeight

Sună din nou:

Funcții de apel invers beforeToggle()Și afterToggle() primesc aceleasi argumente: declanșatorul, elementȘi Mai mult.

• declanșatorul: butoanele „Mai multe detalii” sau „Ascunde”.
• element: blocul care se prăbușește sau se extinde în prezent
• Mai mult: boolean, true - înseamnă că blocul este extins

Exemplu de apel invers.
Iată un exemplu de utilizare a funcției după Comutare, pentru a derula în partea de sus a blocului când este apăsat butonul „ Ascunde":

$("articol").readmore(( afterToggle: function(trigger, element, more) ( daca(! mai mult) ( // a fost dat clic pe butonul "Ascunde" $("html, body").animate(( scrollTop: element .offset().top ),( durata: 100 )); ) ) ));

Puteți dezactiva funcționalitatea pluginului astfel:

$(„articol”). readmore(„distruge”);

Sau puteți specifica un element pe care pluginul nu ar trebui să funcționeze:

$("articol:primul"). readmore("distruge");

CSS

În mod implicit, pluginul inserează următoarele CSS cod pe pagina:

Readmore-js-toggle, .readmore-js-section (afișare: bloc; lățime: 100%; ) .readmore-js-section (overflow: ascuns; )

Folosind opțiunea plugin puteți schimba prima regulă:

$("articol").readmore(( sectionCSS: "display: inline-block; width: 50%;" ));

Dacă doriți să utilizați propriul fișier de stil, atunci în setările pluginului specificați fals:

$("articol").readmore(( embedCSS: false ));

Bună ziua

Să începem de la început în cazul în care cineva nu știe nimic despre mai multe.

Nu am fost la mare.

- Bine, nu-l inunda, nu am fost niciodată la mare!

- Nu am avut nicio șansă, nu am fost...

– Am bătut deja la ușa raiului, ne-am consumat tequila, ne-am luat la propriu în ultima noastră călătorie, dar nu ai fost la mare?!

- Nu am avut timp, nu a ieșit...

– Nu știam că nu există nicăieri în rai fără asta?

Filmul „Bat la ușa raiului”

Cum să adaugi mai multe

Deci, ce bucată de text să fie afișată în anunț este setată folosind eticheta Mai mult. Această etichetă împarte articolul în două părți: introducere (anunț) și continuare.

În editorul WordPress, mai multe etichete pot fi inserate folosind butonul din bara de instrumente.

1. Mod editor vizual:

2. Modul editor de text:

În modul text, puteți, de asemenea, împărți manual intrarea: scrieți

Și acum informații importante pe care nu le cunoaște toată lumea!

Deci, există o modalitate elementară de a oferi fiecărui link după anunț propriul text unic!

Acest lucru se poate face prin simpla scriere a textului dorit în interiorul structurii cu mai mult. Ca aceasta:

Te poți întreba de ce faci asta? De asemenea, notează textul de fiecare dată.

Sincer să fiu, eu sunt așa =) Am publicat deja 84 de articole și doar „ies din pădure” despre asta.

Cum se schimbă textul?

1. Primul - cel mai simplu mod - este să adăugați textul dvs. (de obicei în index.php) la funcția_content

2. A doua metodă folosind un cârlig the_content_more_link. Doar adăugați următorul cod și setați textul linkului dorit.

function my_more_link($more_link, $more_link_text) ( return str_replace($more_link_text, „Continuați să citiți...”, $more_link); ) add_filter(„the_content_more_link”, „my_more_link”, 10, 2);

Această metodă este convenabilă pentru că nu trebuie să căutați prin fișierele șablon pentru a găsi exact unde este utilizat conținutul_(aceasta nu trebuie să fie în index.php, poate fi content.php sau orice altceva.) Aici lucrați doar în fișierul functions.php.

3. În al treilea punct, pur și simplu voi salva pentru istorie metoda folosind un câmp personalizat WordPress.

ID, „custom_more_text”, true); if(!$custom_more) ( $custom_more = "Continuați să citiți articolul"; ) the_content($custom_more); ?>

Introducerea textului direct în, desigur, mai simplu și mai clar.

Aici doar ajustați apelul de funcție continutulîntr-unul din două moduri.

Cum să eliminați #mai multe dintr-un link

În cod, această ancoră este setată în acest fel: