Asettelet julkaisua WordPressissä. Kahden rivin väliin tarvitset pienen tauon, et uutta kappaletta vaan kevyen erottelun. Lisäät kaksi <br>-tagia peräkkäin, vaihdat visuaaliseen editoriin ja takaisin, toinen katosi. Laitat tyhjän rivin, WordPress muuttaa sen uudeksi kappaleeksi täydellä sisennyksellä. Ei sitä mitä halusit.

Kyse ei ole teemasta tai asetuksista. Taustalla toimii wpautop, sisäänrakennettu WordPress-suodatin, joka muotoilee tekstin automaattisesti ja poistaa "ylimääräiset" HTML-tagit. Logiikka on hyödyllinen: se säästää sinut kappaleiden manuaaliselta <p>-tageihin käärimiseltä. Mutta kun asettelet runoutta, kuvasarjan kuvatekstejä tai vaiheittaisia ohjeita, joissa on mikrotaukoja, wpautop on tiellä.

Alla kolme tapaa hallita rivinvaihtoja missä tahansa WordPress-editorissa. Nopeasta sisäänrakennetusta keinosta täysin manuaaliseen CSS:n avulla. Jokainen on testattu WordPress 6.4+:lla, ilman lisäosia.

💡 Pikakatsaus:

• Rekisteröi [br]-shortcode functions.php-tiedostossa, yleiskäyttöinen työkalu mille tahansa määrälle rivinvaihtoja, joka ei koske editoriin
• Käytä Shift+Enteriä tekstiä kirjoittaessasi, sisäänrakennettu keino yhteen rivinvaihtoon, ilman yhtäkään koodiriviä
• Aseta tarkka välistys rivinsisäisellä CSS:llä, kun tarvitset tietyn pikselietäisyyden korostuserotteluun lohkojen välillä

Video: miten luot WordPress-shortcodeja tyhjästä

Katso koko prosessi rekisteröinnistä functions.php-tiedostossa ulostuloon käyttöliittymässä. Sama periaate pätee kaikkiin mukautettuihin shortcodeihin, ei vain [br]:iin.

Tapa 1: [br]-shortcode, täysi hallinta rivinvaihdoista

Shortcode ratkaisee ongelman kertaheitolla. Lisää koodi kerran, ja lisää [br] minne tahansa: julkaisutekstiin, vimpaimen sisään, jopa otsikkoon do_shortcode-funktion kautta. Editori ei koske hakasulkeiden sisällä olevaan sisältöön, wpautop-suodatin jättää sen huomiotta, rivinvaihdot säilyvät riippumatta siitä, kuinka monta kertaa välilehtien välillä vaihdetaan.

Lisää seuraava koodi lapsiteemasi functions.php-tiedostoon. Jos sinulla ei vielä ole lapsiteemaa, luo sellainen ensin oppaamme avulla. Jos et halua koskea teematiedostoihin, asenna Code Snippets -lisäosa ja liitä koodi sinne, sama lopputulos.

1
/**
2
 * Shortcode for manual line breaks in the visual editor.
3
 * Usage: [br] for single break, [br][br] for double.
4
 */
5
function sdstudio_line_break_shortcode() {
6
    return '<br />';
7
}
8
add_shortcode( 'br', 'sdstudio_line_break_shortcode' );

sdstudio_line_break_shortcode-funktio palauttaa HTML <br /> -tagin, ja add_shortcode rekisteröi [br]-shortcoden, WordPress korvaa sen tällä tagilla sivua renderöidessään. sdstudio_-etuliite funktion nimessä suojaa ristiriidoilta: jos toinen lisäosa rekisteröi samannimisen funktion, sivusto ei kaadu.

Koodin lisäämisen jälkeen kirjoita editorissa näin:

1
This is the first paragraph.
2
[br]
3
This is the second line right below the first.
4
[br][br]
5
And this is with a double break.

Tulos: ensimmäinen ja toinen teksti erotetaan yhdellä rivinvaihdolla, kolmas erotetaan kaksoisrivinvaihdolla. WordPress käsittelee shortcodet wpautop-suodattimen jälkeen, joten automaattimuotoilu ei vaikuta niihin.

Nimi br on valittu lyhyyden vuoksi, mutta teknisesti se on riski: toinen lisäosa tai teema saattaa rekisteröidä oman [br]:nsä. Käytännössä ristiriitoja ei juuri koskaan kohdata. Jos huomaat outoa käytöstä, nimeä se uudelleen, esimerkiksi [sd_br]:ksi.

Ennen functions.php-tiedoston muokkaamista ota tiedostosta varmuuskopio FTP:n tai hotellisi tiedostonhallinnan kautta. Jos sivusto lakkaa avautumasta muutosten jälkeen, lataa tallennettu alkuperäinen takaisin, kaikki toimii taas.

Tapa 2: Shift+Enter, sisäänrakennettu keino ilman koodia

Jos tarvitset yhden rivinvaihdon etkä halua säätää koodin kanssa, pidä Shift pohjassa ja paina Enteriä visuaalisessa editorissa.

Kursori siirtyy seuraavalle riville saman kappaleen sisällä. HTML:ssä tämä on sama <br>, vain WordPress lisää sen automaattisesti. Tavallinen Enter luo uuden kappaleen (<p>), kun taas Shift+Enter luo rivinvaihdon ilman välistystä.

Menetelmän haittapuoli: toimii vain yhdelle rivinvaihdolle. Kaksi Shift+Enteriä peräkkäin WordPress yhdistää yhdeksi <br>:ksi, ja kolme muuttuu uudeksi kappaleeksi. Jos tarvitset huomattavaa pystysuoraa väliä rivien väliin, siirry tapaan 3.

Tapa 3: rivinsisäinen CSS tarkkaan pikselivälistykseen

Kun shortcode tai Shift+Enter eivät anna tarvittavaa etäisyyttä, aseta välistys suoraan style-attribuutin kautta.

Vaihda "Teksti"-välilehdelle klassisen editorin oikeassa yläkulmassa:

Etsi kappale, jonka jälkeen tarvitset välistystä. Kääri se <p>-tageihin ja lisää margin-bottom:

1
<p style="margin-bottom: 100px;">
2
This is a paragraph after which there will be 100 pixels of spacing.
3
</p>
4
<p>And this is the next paragraph, with a noticeable gap.</p>

Korvaa 100px-arvo omallasi. Mitä suurempi luku, sitä leveämpi väli. Yläpuolen välistykseen käytä margin-top-ominaisuutta. Voit yhdistää ne: <p style="margin-top: 50px; margin-bottom: 80px;">.

Menetelmä on kätevä yksittäistapauksiin, semanttisten lohkojen korostuserotteluun tietyn julkaisun sisällä. Mutta tällaisen koodin lisääminen jokaiseen kappaleeseen on epäkäytännöllistä. Järjestelmälliseen käyttöön palaa tavan 1 shortcodeen.

⁉️🤔 Usein kysytyt kysymykset

Miksi WordPress poistaa <br> kun vaihdan editorin välilehtien välillä?

TinyMCE-visuaalieditori, kun vaihdetaan "Visuaalinen"-välilehdelle, käsittelee HTML:n uudelleen ja poistaa tagit, joita se pitää tarpeettomina. [br]-shortcodeen tämä siivous ei vaikuta: se puretaan <br>:ksi vasta kun se tulostetaan käyttöliittymässä, ja editorissa se pysyy tavallisena hakasulkeissa olevana tekstinä. Siksi shortcode on luotettavampi kuin suora HTML, rivinvaihtosi säilyvät riippumatta siitä, kuinka monta kertaa välilehtien välillä vaihdetaan.

Voinko käyttää pystysuoraan välistykseen?

Teknisesti kyllä, mutta se on huono käytäntö. Useat peräkkäin näyttävät sotkuisilta, hämmentävät ruudunlukijoita ja hajoavat mobiilinäytöillä. Tyhjään tilaan käytä CSS-välistystä (tapa 3), ja jätä sellaisten sanojen yhteyteen, joita ei voi katkaista rivinvaihdolla, esimerkiksi "WordPress 6.4". Sitova välilyönti ei ole tarkoitettu pystysuoriin väleihin.

Toimiiko [br] Gutenberg-editorissa?

Kyllä, [br]-shortcode toimii missä tahansa WordPress-editorissa: sekä klassisessa että lohkopohjaisessa Gutenbergissä. Gutenbergissä lisää "Shortcode"-lohko ja kirjoita [br]. Lohko on "Vimpaimet"-kategoriassa, jos et näe sitä, klikkaa "Selaa kaikkia" ja etsi se haun kautta. Huomaa: Gutenbergissä Shift+Enter toimii myös, joten yksinkertaisiin yksittäisiin rivinvaihtoihin shortcodea ei ehkä tarvita.

Mitä tehdä, jos shortcode näkyy tekstinä eikä rivinvaihtona?

Kaksi tyypillistä syytä. Ensimmäinen: koodi on lisätty väärään tiedostoon. Tarkista, että funktio on lisätty aktiivisen teeman tai lapsiteeman functions.php-tiedostoon, ei wp-config.php- tai lisäosatiedostoon. Toinen: shortcode on koodilohkon tai HTML-kommentin sisällä, WordPress ei käsittele shortcodeja <pre>-, <code>- ja <!-- -->-tagien sisällä. Pikatarkistus: lisää [br] aivan julkaisun alkuun käyttöliittymässä ja katso tulos.

Tarvitseeko minun poistaa wpautop käytöstä, jotta shortcode toimisi?

Ei, wpautop-toiminnon poistaminen käytöstä ei ole tarpeellista ja on jopa haitallista: menetät automaattisen kappalemuotoilun koko sivustolta. [br]-shortcode toimii wpautop-toiminnosta riippumatta käsittelyjärjestyksen ansiosta: WordPress soveltaa shortcodeja automaattimuotoilusuodattimen jälkeen. Tavalliset kappaleet muotoillaan edelleen automaattisesti, ja sinä hallitset rivinvaihtoja manuaalisesti, juuri siellä missä tarvitaan. Komento remove_filter('the_content', 'wpautop') on radikaali toimenpide, jonka jälkeen joudut sijoittamaan <p>-tagit manuaalisesti koko sivustolla. Suosittelemme välttämään tätä.

Mikä rivinvaihtomenetelmä sopii sinulle

Valinta riippuu tehtävästä. Ei ole yhtä yleispätevää ratkaisua, mutta on selkeä logiikka:

Jos tarvitset nopeasti ja ilman koodia, Shift+Enter. Yksi rivinvaihto riittää useimmissa tapauksissa: erota kuvateksti kuvasta, katkaise pitkä otsikko, tee mikrotauko kappaleen sisällä.

Jos rivinvaihtoja on paljon ja ne toistuvat, [br]-shortcode. Asenna se kerran ja unohda: kirjoita [br] kun tarvitset, vaikka kymmenen kertaa peräkkäin. Koodi functions.php-tiedostossa ei vie kymmentäkään riviä.

Jos tarvitset tarkkaa pikselivälistystä korostuserotteluun, rivinsisäinen CSS. margin-bottom: 80px -pari antaa juuri sen verran ilmaa kuin tietyn sivun suunnittelu vaatii. Älä liioittele: säännölliseen käyttöön palaa shortcodeen.

Nämä kolme tapaa kattavat kaikki rivinvaihtoskenaariot WordPressissä. Valitse tehtävän mukaan, äläkä anna editorin päättää puolestasi, missä pitäisi olla väli ja missä ei.