Tipuri de postări personalizate WordPress – Ducând-o mai departe

Publicat: 2020-12-16

În seria noastră despre tipurile de postări personalizate WordPress, ne-am uitat până acum la crearea unui tip de postare personalizat folosind un plugin și cum să creați manual un tip de postare personalizat prin scrierea propriilor fragmente de cod personalizate. De asemenea, am analizat cum ați putea aplica unele configurații de bază tipurilor dvs. de postări, astfel încât să le puteți gestiona mai ușor de la administratorul WordPress. Dacă nu ați verificat aceste articole, atunci asigurați-vă că aruncați o privire!

În acest articol, vom face lucrurile cu un pas mai departe, bazându-ne pe tipurile noastre de postări personalizate create anterior pentru a le extinde funcționalitatea și capacitatea de utilizare pe site-ul nostru. Dacă doriți să urmați, va trebui să creați tipurile de postări personalizate pe care le-am construit în articolul nostru „Creați manual tipuri de postări personalizate WordPress”, așa că asigurați-vă că ați făcut asta mai întâi, astfel încât următoarele informații să aibă sens.

Să începem!

Afișarea tipurilor de postări personalizate oriunde

După cum ați văzut, am creat anterior un tip de postare personalizat pentru a afișa Rețete pe site-ul nostru. Acesta este un exemplu perfect de situație în care Tipurile de postări personalizate sunt o modalitate incredibil de utilă de a extinde funcționalitatea site-ului nostru.

În exemplul nostru, am putut să afișăm postările noastre de Rețete adăugându-le în meniul principal al site-ului nostru web. De asemenea, am configurat o vizualizare de arhivă care a enumerat toate postările noastre legate de rețetă. Acestea sunt opțiuni excelente pentru afișarea noilor noastre tipuri de postări personalizate, dar ce se întâmplă atunci când dorim să afișăm acest conținut în altă parte pe site-ul nostru?

Utilizarea funcției WP_Query pentru a afișa tipuri de postări personalizate

Pentru a afișa noile noastre postări de rețetă în locațiile pe care le alegem pe site-ul nostru, vom folosi funcția WP_Query . În argumentele sale putem găsi post_types care vor fi folosite în acest caz, deoarece definesc tipurile de postări pe care vrem să le interogăm. Împreună cu ea vom folosi parametrii publish și orderby , deoarece dorim să arătăm postările Rețete care au un statut publicat și să le ordonăm după data descrescătoare pentru a le afișa mai întâi pe cele mai recente.

Să ne imaginăm că vrem să afișăm o listă a postărilor noastre de rețetă în subsolul site-ului nostru, deasupra informațiilor privind drepturile de autor. Pentru a face acest lucru vom folosi un fragment de cod care, în cazul nostru, trebuie inserat în fișierul singular.php sub începutul elementului <footer> .

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?>

În acest exemplu, folosim tema curentă implicită WordPress Twenty Twenty. Dacă utilizați o altă temă decât Twenty Twenty, ar trebui să editați fișierul care conține conținutul subsolului pentru tema dvs.

Cu codul adăugat, ne putem deschide site-ul web și ar trebui să vedem postările noastre de rețetă enumerate în subsolul nostru.

Aspectul și aspectul acestor postări în subsolul dvs. pot fi stilate pentru a arăta cum doriți folosind CSS. Cel mai bun loc pentru a adăuga orice CSS este în fișierul style.css care se află sub folderul principal al temei. Avem câteva CSS posibile pe care ați dori să le utilizați mai jos.

 .recent-recipes h3 { font-size: 18px; margin: 15px 0; } .recipe { float: left; margin: 15px; } .recent-recipes { height: 240px; margin: 0 auto; width: 1190px; }

Odată ce acest CSS a fost salvat și pagina reîmprospătată, ar trebui să vedeți aspectul postărilor dvs. de rețetă în subsol, astfel încât să arate astfel:

Modificarea aspectului tipurilor de postări personalizate cu CSS

Importanța resetării buclei

Poate ați observat că după definirea argumentelor necesare în cod, o buclă post începe și se termină cu funcția wp_reset_postdata() . Utilizarea acestei funcții este foarte importantă și iată de ce.

Când WordPress creează un aspect de pagină, folosește o variabilă globală $post care funcționează bine dacă există o singură buclă în pagină. Acum, că am adăugat bucla personalizată, înlocuim practic variabila globală $post și, cu excepția cazului în care îi spunem WordPress că bucla se resetează, se va relua de acolo folosind tipul de post personalizat pe care l-am definit în bucla noastră.

Să ne uităm la cum funcționează acest lucru în practică, reluând titlul postării sub codul de mai sus, astfel:

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?> <?php the_title(); ?>

Acum, dacă ne reîmprospătăm pagina pe front-end-ul site-ului nostru web, vedem titlul „Post 1” sub rețetele noastre recente.

Acest lucru are sens deoarece resetăm înapoi la bucla originală cu wp_reset_postdata(); funcţie.

Acum, comentați wp_reset_postdata(); din codul dvs. Veți observa că the_title(); codul va ecou titlul „Rețetă 1” în loc de „Post 1”.

Tipuri de postări personalizate – Management suplimentar

Pentru a personaliza în continuare comportamentul și aspectul postărilor personalizate, vom analiza câteva opțiuni care pot fi adăugate ca extensie la codul pe care l-am folosit în articolul nostru anterior pentru a ne înregistra tipul de postare „rețete”.

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, ) ); } add_action( 'init', 'recipes_post_type' );

Vom adăuga mai multe argumente pentru a:

Schimbați URL-ul tipului de postare personalizat al rețetelor
Schimbați poziția meniului de administrare Tip de postare personalizat
Schimbați pictograma meniului

Modificarea URL-ului tipului de postare personalizat

Dacă creăm o postare cu rețetă și o numim „Rețetă 1”, atunci URL-ul implicit al postării „Rețetă 1” ar fi ceva de genul https://mycompanyname.com/recipes/recipe-1/ ://numele companiei.com/rețete/rețeta-1/ cu condiția ca permalinkurile să fie setate la „ Numele postării” în Setările noastre de permalink.

Dacă doriți să schimbați modul în care apare tipul de postare personalizat Rețete în adresa URL, puteți utiliza argumentul de rewrite cu cheia sa slug .

După cum am observat din URL, dacă acest argument este omis, valoarea implicită ar fi eticheta tip personalizat de postare „rețete”. Dacă vrem să schimbăm acest lucru în my-home-recipes de exemplu, trebuie să o suprascriem editând fragmentul nostru de cod pentru a arăta astfel:

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), ) ); } add_action( 'init', 'recipes_post_type' );

Acum, dacă salvați permalink-uri (spăiți memoria cache a permalink-urilor) și vedeți din nou rețeta, adresa dvs. URL ar trebui să fie https://mycompanyname.com/my-home-recipes/recipe-1/

Rețineți că, dacă schimbați slug-ul, va trebui să schimbați și adresa URL a arhivei de la /recipes/ la /rețete /my-home-recipes/ in pagina Meniul principal.

Modificarea poziționării meniului tip post personalizat

Dacă doriți să mutați meniul Rețete într-o altă poziție, puteți utiliza argumentul menu_position astfel:

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, ) ); } add_action( 'init', 'recipes_post_type' );

Valorile pe care le puteți folosi pentru acest argument sunt:

0: în partea de sus
5: mai jos Postări
10: mai jos Media
15: mai jos Link-uri
20: paginile de mai jos
25: mai jos comentarii
60: sub primul interval din meniu
65: mai jos Pluginuri
70 : mai jos Utilizatori
75 : mai jos Instrumente
80 : mai jos Setări
100: sub al doilea interval din meniu

Captura de ecran de mai jos arată poziția meniului atunci când valoarea 5 a fost adăugată la argumentul menu_position .

Schimbarea pictogramei meniului tip post personalizat

În prezent, meniul Rețete utilizează pictograma de postări implicită. Ar fi o atingere plăcută că avea propria sa pictogramă unică. Pentru a realiza acest lucru putem folosi argumentul menu_icon .

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'https://mycompanyname.com/wp-content/uploads/2020/10/recipes.svg', ) ); } add_action( 'init', 'recipes_post_type' );

Pentru a vă afișa propria pictogramă, puteți introduce adresa URL completă a locației pictogramei meniului (după cum se arată în codul de mai sus) sau puteți utiliza biblioteca Dashicons WordPress adăugând numele clasei pictogramei. Puteți vedea pictogramele cu clasele corespunzătoare aici.

Dacă, de exemplu, ați alege pictograma de mâncare, ați adăuga-o la codul dvs. astfel 'menu_icon' => 'dashicons-food' .

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'dashicons-food', ) ); } add_action( 'init', 'recipes_post_type' );

Rezultatul final ar trebui să fie că pictograma aleasă de dvs. să apară în meniul dvs. de postare personalizată... ajutând să vă simțiți postarea personalizată, ei bine, cu adevărat personalizată!

Lectură suplimentară

Creați tipuri de postări personalizate WordPress folosind un plugin
Creați manual tipuri de postări personalizate WordPress
Creați tipuri de postări personalizate WordPress folosind propriul dvs. plugin!

Concluzie

Sperăm că aceste sfaturi vă ajută cu adevărat în încercarea de a vă crea propriile tipuri de postări personalizate și, în acest fel, vă permit să îmbunătățiți în continuare funcțiile și utilizarea site-ului dvs. WordPress. Ca și în cazul tuturor codurilor, cel mai bine este să vă luați ceva timp pentru a juca și a vedea cum noul dvs. cod influențează site-ul dvs. Construirea pe aceste baze vă va permite apoi să abordați proiecte și mai complexe în care este nevoie de personalizare puternică.