De 4 bedste måder at skjule tekst på i WordPress

Når du først ser, hvor nemt det er at skjule tekst i WordPress, kan du bekymre dig mindre om at fylde dit websted med bidder af indhold, der påvirker læsbarheden.

Sammenklappeligt indhold kan tilføjes med en til/fra-knap eller ved at oprette harmonikamenuer. Nogle WP-temaer kommer med brugerdefinerede kortkoder til at injicere harmonikamenuer hvor som helst på dit websted.

Hvis dit tema ikke understøtter sammenklappeligt indhold, kan du tilføje det manuelt med plugins eller ved at redigere dine temafiler.



Det vil endda også fungere på gratis WordPress.com-planer, bare uden nogen form for styling.

Sådan skjuler du tekst i WordPress

Brug 'Accordion' plugins eller shortcode plugins med 'accordion' eller 'toggle' funktionen til at skjule tekst i WordPress. WordPress.com gratis planer kan gøre indhold sammenklappeligt ved at tilføje HTML i teksteditoren. På selv-hostede websteder kan temaer kodes til at bruge WordPress-hooks til at indlæse en jQuery UI Accordion.

Forskellen mellem toggle og harmonika på WordPress

Harmonika- og skiftefunktionerne er to metoder, der fungerer til at skjule tekst i WordPress.

Forskellen mellem skifte og harmonikatekst er denne...

  • Med et harmonikaelement, når der klikkes på én sektion, indlæses kun den sektion af indholdet. Når der klikkes på det næste harmonikaelement, lukkes det forrige tekstafsnit automatisk.
  • Med skiftefunktionen kan alle sammenfoldelige indholdsområder indlæses og forblive åbne. Indholdsbokse, der vises med skifte-elementer, lukkes ikke automatisk.

På lange sider er harmonikaelementet at foretrække, da det forhindrer skærme i at blive fyldt med spørgsmål, som brugeren ikke har interesse i at læse om.

De kan rulle titlerne på en side med ofte stillede spørgsmål, og når de finder et spørgsmål, de vil have besvaret, kan de klikke for kun at se den specifikke indholdssektion.

Tænk på det på denne måde...

Hvis du ville finde ud af 'hvor meget er levering?', hvad ville du så hellere have...

a) Enkelte titellinjer med specifikke spørgsmål i overskriftstags?

Eller

b) Scroller du gennem 80 spørgsmål og svar, indtil du fandt den, du ønskede?

Harmonikaelementer gør dit indhold mere skummet.

4 måder at skjule tekst i WordPress

1. Brug en harmonikablok i Gutenberg Editor

For dem, der bruger den nye 'blok'- eller Gutenberg-editor på et WordPress-websted, der selv hoster, kan harmonika-plugins tilføjes fra sidebjælken i din blok-editor.

Det er den samme proces som den gamle metode til at tilføje plugins for at udvide funktionaliteten på dit websted. Bare mere praktisk, da du ikke længere behøver at gå til plugins-menuen for at tilføje et nyt plugin.

Indlæs din blok-editor, klik på +-ikonet for at tilføje en ny blok, og søg derefter efter 'harmonika'.

Ingen harmonikablokke er forudinstalleret. Du skal tilføje et harmonikablok-plugin.

Til vores test var det tilføjede plugin ' Harmonika ” af “WPDeveloper”.

Muligheden for at tilføje plugins fra WP-blokeditorens dashboard blev tilføjet i WordPress version 5.6.

Hvis du kører en ældre version af WordPress, skal du tilføje pluginnet på standardmåden.

Alternativt kan du opdatere din WordPress-version til den seneste tilgængelige.

Fordelen ved at bruge de nye blokke til indhold i harmonikastil er, at de JavaScript-forespørgsler, der kræves for at aktivere det, kun kører, når blokken er indlæst.

Det plejede at være, at skjule billederne i en harmonikamenu kunne hjælpe med at øge webstedets hastighed. Nu har WordPress 'doven belastning' aktiveret som standard. Alligevel gør det præsentationen bedre.

For at inkludere billeder i udvidede indholdssektioner skal du klikke på de tre lodrette prikker, vælge 'Rediger som HTML' og tilføje din billedkildekode ved hjælp af følgende HTML-streng

<img src="http://yoursite.com/wp-content/uploads/2021/09/your-image-title.jpg" alt="give it an alternative title" width="###" height="###">

Billedets URL vises i dit mediebibliotek.

2. Tilføj en harmonika-sektion med kun HTML (påkrævet på gratis WordPress.com-planer)

På gratis WordPress.com-planer er der et handicap.

Du kan ikke køre JavaScript-forespørgsler, og du kan ikke installere WordPress plugins enten. Du kan stadig skjule tekst i teksteditoren.

Åbn din side eller dit indlæg i redigeringstilstand, og brug 'tekst'-editoren. Ikke den visuelle editor.

Koden der skal tilføjes er

<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>

(gentag så mange gange som nødvendigt)

Fordelen ved dette er, at du kan tilføje det uden ekstra plugins, og det virker også på gratis WordPress.com-konti.

Da det er almindelig HTML, er resultatet almindelig tekst.

For at inkludere stylingelementer i en harmonika eller skifteelementer skal du bruge et plugin eller hardkode din temaskabelon.

Plugins er enklere, så hvis du er sarte med redigeringskode, skal du bruge et plugin. Ultimate Shortcodes-plugin'et har flere ikoner.

For de frygtindgydende, fortsæt med at læse for instruktioner om hardkodning af dit tema for at indlæse en tilpasset jQuery UI-harmonika.

3. Brug plugins til at skjule tekst i WordPress Classic Editor

Millioner af WP-brugere arbejder stadig med Classic-editoren. Hvis du gør det, har du brug for et kompatibelt plugin.

Et af de enkleste plugins at bruge er...

Harmonika af PickPlugins

Dette plugin tilsluttes Font Awesome-biblioteket. Tilføj ikonet HTML-kode for ethvert element fra Font Awesome for at tilsidesætte standardpilene.

Når den er installeret, føjes en ny menu til din admin sidebjælke. Klik på 'tilføj ny' for at oprette så mange harmonikamenuer, som du har brug for.

Den skjulte tekst kan vises hvor som helst på dit websted, der accepterer HTML.

Dette kan være inden for indlæg, sider og widgetområder ved at bruge HTML-widgetten. Tilføj widgeten, giv den en titel, indsæt kortkoden og harmonikamenuen vises.

Bredden af ​​indholdet justeres automatisk, så der ikke kræves noget rod med CSS for at fastsætte skærmstørrelser til forskellige skærme.

I harmonikamenuen kan du bruge HTML og indsætte billeder.

I stedet for kun fjerne seneste indlæg i WordPress , kan du gå videre ved at bruge dette harmonika-plugin til at skabe en widget i fuld stil til at vise dit mest populære indhold, dybdegående vejledninger, topanmeldelser og købsguider direkte i en enkelt harmonika-widget.

Med andre ord giver det dig bedre udnyttelse af widget-ejendommen på WordPress-websteder.

… Alt imens du undgår at rode i dit sidebar-widgetområde.

4. Tilføj en jQuery UI Accordion til WordPress-temaer

Denne proces er noget kompliceret, fordi WordPress ikke tillader, at JavaScript køres i header-filen.

I stedet er JS-scripts allerede registreret som standard på en WordPress-installation. Det eneste du skal gøre er at 'kroge' ind i dem.

Medmindre du udvikler dit eget brugerdefinerede tema eller plugin, bør du ikke have behov for at lære at skjule tekst i WordPress ved hjælp af WordPress-kroge.

Alligevel vil det ikke skade at vide, hvordan det bliver gjort, for så kan du lave rettelser, hvis noget holder op med at virke. Som efter en WordPress opdatering .

WP-temaudviklere bruger hooks i WordPress Codex til at tilslutte sig mange af de forudbundtede biblioteker.

Funktionen 'jQuery UI Accordion' er den, der skal køres for at lave sammenklappelig tekst i WP.

Scripts og filer til at skjule tekst på WordPress

Først skal du oprette JavaScript-filen.

Brug en almindelig teksteditor som Notesblok og indsæt følgende

//jQuery-ui-accordion
jQuery(document).ready(function($) {
$( "#accordion" ).accordion({
collapsible: true, active: false, heightStyle: "content"
});
});

Gem filen som 'accordion.js'.

Hvad denne kode gør...

Den sidste kodelinje er at gøre alle elementer sammenklappelige.

Indstilling af 'aktiv' tilstand til falsk betyder, at brugeren skal klikke for at indlæse indholdssektionen. Hvis du indstiller dette til 'true', vil det første element i din harmonika-sektion forudindlæses.

Den sidste del for 'heightStyle: 'indhold' betyder, at der ikke er angivet en max-højde. Hvis du indstiller det til 'indhold', indlæses alt indholdet i div-elementet uden at skulle rulle ned eller henover.

I ovenstående kode er #accordion for 'div ID' og .accordion er for en 'div klasse'. Med dem disse tilføjet, når du placerer

<div ID="accordion"> and <div class="accordion">

… i din teksteditor vil jQuery blive udløst.

  • [ # ] er en identifikator
  • [. ] er en klasse

Sådan tilføjer du brugerdefinerede JavaScript-filer til WP-temaer

Gå til dit cPanel, åbn det tema, du vil køre scriptet på, og kig derefter efter mappen kaldet 'JS'. Det er her du kan placere alle JavaScript-filer.

Nogle temaer vil have mappen i roden af ​​temafilerne Filsti: WP-indhold > Temaer > Dit tema > JS.

Andre kan bruge en undermappe som en 'aktiver'-mappe i temamappen. Det ville følge filstien: WP Content > Themes > Your Theme > Assets > JS.

Mappen for alle JavaScript-filer er JS. Hvis dit tema ikke har et, skal du oprette et.

Åbn JS-mappen til dit tema, klik på 'upload fil' og slip din 'accordion.js'-fil.

Rediger functions.php for at indlæse JavaScript

Denne del er at bede WordPress om at indlæse JavaScript-filen. På de fleste andre platforme gøres dette i header-filen. Da WordPress kører på PHP, kan JavaScript ikke indlæses ved hjælp af