Un cop veieu com de fàcil és col·lapsar el text a WordPress, us podeu preocupar menys d'afartar el vostre lloc amb fragments de contingut que afectin la llegibilitat.
El contingut plegable es pot afegir amb un commutador o creant menús d'acordió. Alguns temes de WP inclouen codis curts personalitzats per injectar menús d'acordió a qualsevol lloc del vostre lloc.
Si el vostre tema no admet contingut plegable, podeu afegir-lo manualment amb connectors o editant els fitxers del tema.
Fins i tot funcionarà amb plans gratuïts de WordPress.com, sense cap estil.
Com replegar el text a WordPress
Utilitzeu connectors 'acordió' o connectors de codi curt amb la funció 'acordió' o 'alternativa' per replegar el text a WordPress. Els plans gratuïts de WordPress.com poden fer que el contingut sigui plegable afegint
La diferència entre la commutació i l'acordió a WordPress
Les funcions d'acordió i de commutació són dos mètodes que funcionen per col·lapsar el text a WordPress.
La diferència entre el text alternatiu i acordió és aquesta...
- Amb un element d'acordió, quan es fa clic en una secció, només es carrega aquesta secció de contingut. Quan es fa clic al següent element d'acordió, la secció de text anterior es tanca automàticament.
- Amb la funció de commutació, totes les àrees de contingut plegables es poden carregar i romandre obertes. Els quadres de contingut que es mostren amb elements de commutació no es tanquen automàticament.
En pàgines llargues, és preferible l'element acordió, ja que evita que les pantalles s'omplin de preguntes que l'usuari no té cap interès a llegir.
Poden desplaçar-se pels títols d'una pàgina de preguntes freqüents i, després, quan trobin una pregunta que volen que se respongui, poden fer clic per veure només aquesta secció de contingut específica.
Pensa-ho així...
Si volguéssiu saber 'quant costa el lliurament?', què preferiu...
a) Barres de títol individuals amb preguntes específiques a les etiquetes d'encapçalament?
O
b) Desplaçar-se per 80 preguntes i respostes fins a trobar la que volies?
Els elements d'acordió fan que el vostre contingut sigui més descremat.
4 maneres de col·lapsar el text a WordPress
1. Utilitzeu un bloc d'acordió a l'Editor Gutenberg
Per a aquells que utilitzen el nou editor 'block' o Gutenberg en un lloc web de WordPress allotjat per si mateix, es poden afegir connectors d'acordió des de la barra lateral del vostre editor de blocs.
És el mateix procés que l'antic mètode per afegir connectors per ampliar la funcionalitat del vostre lloc. Més còmode, ja que ja no cal que aneu al menú de connectors per afegir un connector nou.
Carregueu el vostre editor de blocs, feu clic a la icona + per afegir un bloc nou i, a continuació, cerqueu 'acordió'.
No hi ha cap bloc d'acordió preinstal·lat. Heu d'afegir un connector de bloc d'acordió.
Per a les nostres proves, el connector afegit era ' Acordió ” per “WPDeveloper”.
La possibilitat d'afegir connectors des del tauler de control de l'editor de blocs WP es va afegir a la versió 5.6 de WordPress.
últimes notícies sobre mar roxas
Si feu servir una versió anterior de WordPress, haureu d'afegir el connector de la manera estàndard.
Alternativament, actualitzeu la vostra versió de WordPress a l'última disponible.
L'avantatge d'utilitzar els blocs nous per al contingut d'estil acordió és que les consultes de JavaScript necessàries per habilitar-lo només s'executen quan es carrega el bloc.
Abans era que amagar les imatges dins d'un menú d'acordió podria ajudar a augmentar la velocitat del lloc. Ara, WordPress té la 'càrrega mandrosa' activada per defecte. Tot i així, millora la presentació.
Per incloure imatges a les seccions de contingut ampliat, feu clic als tres punts verticals, seleccioneu 'Edita com a HTML' i afegiu el codi font de la imatge amb la següent cadena HTML
<img src="http://yoursite.com/wp-content/uploads/2021/09/your-image-title.jpg" alt="give it an alternative title" width="###" height="###">
L'URL de la imatge es mostra a la vostra biblioteca multimèdia.
2. Afegiu una secció d'acordió només amb HTML (necessari als plans gratuïts de WordPress.com)
En els plans gratuïts de WordPress.com, hi ha un handicap.
No podeu executar consultes de JavaScript, i vosaltres no es poden instal·lar connectors de WordPress tampoc. Encara podeu replegar el text a l'editor de text.
Obriu la vostra pàgina o publica en mode d'edició i utilitzeu l'editor de 'text'. No l'editor visual.
El codi a afegir és
<details> <summary>Question 1</summary> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </details>
(repetiu tantes vegades com sigui necessari)
L'avantatge d'això és que podeu afegir-lo sense complements addicionals i també funciona amb comptes gratuïts de WordPress.com.
Com que és HTML senzill, el resultat és text sense format.
Per incloure elements d'estil en un acordió o elements de commutació, utilitzeu un connector o codifiqueu la vostra plantilla de tema.
Els connectors són més senzills, de manera que si teniu un codi dèbil amb l'edició, aneu amb un connector. El connector Ultimate Shortcodes té diverses icones.
Per als temibles, continueu llegint per obtenir instruccions sobre com codificar el vostre tema per carregar un acordió d'interfície d'usuari de jQuery personalitzat.
3. Utilitzeu connectors per replegar el text a l'Editor clàssic de WordPress
Milions d'usuaris de WP encara treballen amb l'editor clàssic. Si ho feu, necessiteu un connector compatible.
Un dels complements més senzills d'utilitzar és...
Acordió de PickPlugins
Aquest connector es connecta a la biblioteca Font Awesome. Afegiu el codi HTML de la icona per a qualsevol element de Font Awesome per substituir les fletxes predeterminades.
Un cop instal·lat, s'afegeix un menú nou a la barra lateral d'administració. Feu clic a 'Afegeix nou' per crear tants menús d'acordió com necessiteu.
El text replegat es pot mostrar a qualsevol lloc del vostre lloc que accepti HTML.
Billy Crawford i Coleen García
Això pot ser dins de publicacions, pàgines i àrees de widgets mitjançant el giny HTML. Afegiu el giny, poseu-li un títol, inseriu el codi curt i es mostrarà el menú d'acordió.
L'amplada del contingut s'ajusta automàticament, de manera que no es requereixen problemes amb CSS per arreglar les mides de visualització de diverses pantalles.
Dins del menú d'acordió, podeu utilitzar HTML i inserir imatges.
Més que només elimina les publicacions recents a WordPress , podeu anar més enllà utilitzant aquest connector d'acordió per crear un giny d'estil complet per mostrar el vostre contingut més popular, guies en profunditat, ressenyes principals i guies de compra directament dins d'un únic giny d'acordió.
En altres paraules, us ofereix un millor ús del widget immobiliari als llocs web de WordPress.
… Tot evitant desordenar l'àrea del giny de la barra lateral.
4. Afegiu un acordió d'IU de jQuery als temes de WordPress
Aquest procés és una mica complicat perquè WordPress no permet executar JavaScript dins del fitxer de capçalera.
En canvi, els scripts JS ja estan registrats de manera predeterminada en una instal·lació de WordPress. Tot el que heu de fer és 'enganxar' a ells.
A menys que estigueu desenvolupant el vostre propi tema o complement personalitzat, no hauríeu d'aprendre a replegar el text a WordPress mitjançant els ganxos de WordPress.
Tot i així, no estarà de més saber com es fa perquè llavors podeu fer correccions si alguna cosa deixa de funcionar. Com després d'a Actualització de WordPress .
Els desenvolupadors de temes WP utilitzen ganxos al Codex de WordPress per connectar-se a moltes de les biblioteques pre-empaquetades.
La funció 'jQuery UI Accordion' és la que s'executa per fer text plegable a WP.
Els scripts i fitxers per replegar el text a WordPress
Primer, creeu el fitxer JavaScript.
Utilitzeu un editor de text senzill com el Bloc de notes i enganxeu el següent
//jQuery-ui-accordion
jQuery(document).ready(function($) {
$( "#accordion" ).accordion({
collapsible: true, active: false, heightStyle: "content"
});
});Deseu el fitxer com a 'accordion.js'.
Què fa aquest codi...
L'última línia de codi és fer que tots els elements siguin plegables.
Establir l'estat 'actiu' a fals significa que l'usuari ha de fer clic per carregar la secció de contingut. Si configureu-ho com a 'true', es carregarà prèviament el primer element de la vostra secció d'acordió.
L'última part de 'heightStyle': 'contingut' vol dir que no hi ha cap conjunt d'alçada màxima. Si el defineixes com a 'contingut', es carregarà tot el contingut de l'element div sense necessitat de desplaçar-te cap avall o cap avall.
Al codi anterior, el #acordion és per a la 'ID div' i el .acordion és per a una 'classe div'. Amb aquests afegits, quan col·loquis
<div ID="accordion"> and <div class="accordion">
… dins del vostre editor de text, s'activarà jQuery.
- [ # ] és un identificador
- [ . ] és una classe
Com afegir fitxers JavaScript personalitzats als temes WP
Aneu al vostre cPanel, obriu el tema en què voleu executar l'script i, a continuació, cerqueu la carpeta anomenada 'JS'. Aquí és on posar els fitxers JavaScript.
Alguns temes tindran la carpeta a l'arrel dels fitxers del tema Camí del fitxer: WP Content > Themes > Your Theme > JS.
Altres poden utilitzar una subcarpeta com una carpeta 'actius' dins de la carpeta del tema. Això seguiria el camí del fitxer: WP Content > Themes > Your Theme > Assets > JS.
La carpeta per a tots els fitxers JavaScript és JS. Si el vostre tema no en té cap, creeu-ne un.
els 50 millors jutges del món
Obriu la carpeta JS del vostre tema, feu clic a 'carregar fitxer' i introduïu el fitxer 'accordion.js'.
Editeu el functions.php per carregar el JavaScript
Aquesta part és dir-li a WordPress que carregui el fitxer JavaScript. A la majoria de les altres plataformes, això es fa al fitxer de capçalera. Com que WordPress funciona amb PHP, JavaScript no es pot carregar amb l'etiqueta Tots Els Drets Reservats | creme-de-la-creme.jp | Política De Privacitat