Cum să adăugați butonul "Încarcă mai multe postări" în WordPress

Când vizitatorii ajung pe blogul dvs., scopul este să-i mențineți citind cât mai mult timp posibil. Dar dacă trebuie să dea clic constant pe pagina următoare, acest lucru creează o fricțiune care îi poate determina să plece înainte de a explora mai mult din conținutul dvs.

Aici intervine un buton „Încarcă mai multe articole”. În loc să întrerupă fluxul, cititorii pot încărca instantaneu articole noi fără a părăsi pagina. Această funcție simplă poate reduce ratele de respingere, poate îmbunătăți timpul petrecut pe site și poate face navigarea prin conținutul dvs. să pară fără efort.

Am văzut că această abordare funcționează deosebit de bine pentru bloguri și site-uri de tip revistă cu multe postări. Adăugarea unui buton „load more” (încarcă mai multe) facilitează descoperirea mai multor conținuturi de către cititori. În plus, cu cât stau mai mult, cu atât este mai probabil să se aboneze sau să devină vizitatori fideli.

În acest articol, vă vom arăta cum să adăugați un buton de încărcare mai multe postări în WordPress, pas cu pas.

Când și de ce să adăugați butonul „Încarcă mai multe postări” în WordPress

Dacă doriți ca oamenii să petreacă mai mult timp pe site-ul dvs., trebuie să le faceți ușor să descopere conținut nou. Cu cât vizitatorii rămân mai mult timp implicați cu conținutul dvs., cu atât obțineți mai multe vizualizări și cu atât este mai probabil să se aboneze sau să revină.

Majoritatea blogurilor folosesc o navigare simplă în partea de jos a paginilor de pornire, de blog sau de arhivă, cum ar fi un link „Postări mai vechi” sau paginare numerică. Deși acest lucru funcționează, poate întrerupe fluxul de lectură și poate determina vizitatorii să nu mai navigheze.

Acesta este motivul pentru care anumite tipuri de site-uri beneficiază enorm de pe urma adăugării unui buton „Încarcă mai multe postări”. Este deosebit de eficient pentru site-urile cu mult conținut, cum ar fi blogurile culinare, site-urile de fotografie, listicle-urile sau site-urile de știri virale.

Luați ca exemplu blogul So Much Food, ei folosesc un buton curat „Încarcă mai multe postări” care încarcă instantaneu rețete noi.

În loc să încarce o pagină complet nouă, un buton „Încarcă mai multe postări” funcționează ca scroll infinit. Acesta folosește JavaScript pentru a prelua rapid următorul set de conținut. Acest lucru îmbunătățește experiența utilizatorului și le oferă șansa de a vizualiza mai mult din conținutul dvs. fără întreruperi.

Acestea fiind spuse, să vedem cum să adăugați cu ușurință butonul „load more posts” (încarcă mai multe postări) pe site-ul dvs. WordPress.

Pasul 1: Adăugarea butonului de încărcare mai multe postări în WordPress

Primul lucru pe care trebuie să îl faceți este să instalați și să activați pluginul Ajax Load More. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

La activare, pluginul va adăuga un nou element de meniu etichetat „Ajax Load More” în meniul de administrare WordPress. Trebuie să faceți clic pe el și să accesați pagina de setări a pluginului.

Pe pagina de setări, puteți alege culoarea butonului dvs. De asemenea, puteți înlocui butonul cu defilare infinită, care încarcă automat următorul lot de postări fără ca utilizatorii să apese pe buton.

În continuare, trebuie să vizitați pagina Ajax Load More » Repeater Template pentru a adăuga șablonul dvs. pentru afișarea postărilor.

Pluginul vine cu un șablon de bază care conține bucla WordPress pentru a afișa postările. Cu toate acestea, nu se potrivește temei dvs. și ar putea arăta nepotrivit pe site-ul dvs.

Pentru a remedia acest lucru, trebuie să copiați codul pe care tema dvs. îl folosește pentru a afișa postări pe paginile de index, arhivă și blog.

În mod normal, acest cod se află în folderul template-parts al temei dvs. În acel folder, veți vedea șabloane pentru afișarea diferitelor conținuturi. De exemplu, content-page.php, content-search.php și altele.

Veți căuta șablonul generic content.php. Iată un exemplu din fișierul content.php al temei noastre demo:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php
        // Post thumbnail.
        twentyfifteen_post_thumbnail();
    ?>
 
    <header class="entry-header">
        <?php
            if ( is_single() ) :
                the_title( '<h1 class="entry-title">', '</h1>' );
            else :
                the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
            endif;
        ?>
    </header><!-- .entry-header -->
 
    <div class="entry-content">
        <?php
            /* translators: %s: Name of current post */
            the_content( sprintf(
                __( 'Continue reading %s', 'twentyfifteen' ),
                the_title( '<span class="screen-reader-text">', '</span>', false )
            ) );
 
            wp_link_pages( array(
                'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>',
                'after'       => '</div>',
                'link_before' => '<span>',
                'link_after'  => '</span>',
                'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%',
                'separator'   => '<span class="screen-reader-text">, </span>',
            ) );
        ?>
    </div><!-- .entry-content -->
 
    <?php
        // Author bio.
        if ( is_single() && get_the_author_meta( 'description' ) ) :
            get_template_part( 'author-bio' );
        endif;
    ?>
 
    <footer class="entry-footer">
        <?php twentyfifteen_entry_meta(); ?>
        <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?>
    </footer><!-- .entry-footer -->
 
</article><!-- #post-## -->

Odată ce găsești acel cod, trebuie să îl introduci în câmpul „Repeater Templates” din setările pluginului.

Nu uitați să faceți clic pe butonul „Salvează șablonul” pentru a vă salva setările.

Apoi, trebuie să vizitați pagina Ajax Load More » Shortcode Builder pentru a genera shortcode.

Această pagină conține multe opțiuni diferite pe care le puteți personaliza. Mai întâi, va trebui să selectați tipul de container. Dacă nu sunteți sigur, uitați-vă la șablonul pe care l-ați copiat mai devreme. Majoritatea temelor moderne WordPress folosesc elementul <div>.

După aceea, derulați în jos la secțiunea etichetelor butoanelor. Aici puteți schimba textul care apare pe buton. Implicit, pluginul folosește „Postări mai vechi” și îl puteți schimba în „Încarcă mai multe postări” sau orice doriți.

În cele din urmă, trebuie să alegeți dacă doriți ca postările să se încarce automat sau să aștepte ca utilizatorii să facă clic pe butonul de încărcare mai multe postări.

Shortcodul dvs. este acum gata de utilizare. În coloana din dreapta, veți vedea ieșirea shortcodului. Continuați și copiați shortcodul și lipiți-l într-un editor de text, deoarece veți avea nevoie de el în pasul următor.

Pasul 2: Adăugarea „Încarcă mai multe postări” în tema dvs. WordPress

Această parte a tutorialului necesită adăugarea de cod în fișierele temei WordPress. Dacă nu ați mai făcut acest lucru înainte, consultați ghidul nostru despre cum să copiați și să lipiți cod în WordPress.

Notă: Nu uitați să faceți o copie de rezervă a temei WordPress înainte de a face orice modificări.

Va trebui să găsiți fișierele șablon unde doriți să adăugați butonul de încărcare mai multe postări în tema dvs. În funcție de modul în care este organizată tema dvs., de obicei aceste fișiere sunt index.php, archives.php, categories.php etc.

Va trebui să adăugați shortcode-ul pe care l-ați copiat anterior în tema dvs. chiar după eticheta endwhile;.

Deoarece adăugăm shortcode-ul într-un fișier de temă, va trebui să îl adăugăm în interiorul funcției do_shortcode, astfel:

echo do_shortcode('[ajax_load_more container_type="div" post_type="post"]');  

Acum puteți salva modificările și puteți vizita site-ul dvs. web pentru a vedea butonul „Încarcă mai multe postări” în acțiune. Iată cum arăta pe site-ul nostru demo:

Sperăm că acest articol v-a ajutat să învățați cum să adăugați un buton de încărcare mai multe postări în WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să listați postările viitoare programate în WordPress și selecțiile noastre de experți ale celor mai bune pluginuri pentru postări similare pentru WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.