WordPress

Kategorie: Open-source, Web

Redakční systém pro servery a blogovací nástroj. Shromáždil jsem pár poznámek a poznatků okolo redakčního systému WordPress. Týká se to spíš drobných vylepšení a úprav výhradně verze 5.5.

Pluginy

Jestliže WordPressu chybí nějaká vlastnost, velmi pravděpodobně ji lze pluginem doplnit. Stačí se podívat na výběr různých typů z repozitáře. V základu již WordPress obsahuje pár základních pluginů jako: Akismet Anti-Spam, BBQ, WP Limit Login Attempts.

Nedoporučuji zahltit systém mnoha pluginy a doporučuji nechat si pouze ověřené a potřebné. Mám podezření, že některé pluginy dokonce přivádí na web nežádoucí návštěvníky.

Easy table of contents

Modul vytváří automaticky obsah stránky/příspěvku. Je to velmi podařený plugin a používám jej na svých stránkách pro jeho funkčnost a přizpůsobitelnost.

Contact Form 7

Plugin pro vytvoření kontaktního formuláře, ocenil jsem jednoduchost a rychlost provedení. Funguje na verzi 5.5.

File Upload Types

Skvělý modul pro povolení nahrávání veškerých typů souborů. Funguje na verzi 5.5.

Sort posts by alphabetical order

Je dlouho hledaný plugin pro řazení článků dle abecedy. Stačí jej nainstalovat a aktivovat. Bohužel nefunguje na štítky. Funguje na verzi 5.5.

Velvet Blues Update URLs

Nahrazuje původní URL adresy za nové, hodí se výborně na přesun webu na jinou doménu anebo při změnách URL, týká se:

  • Článků
  • Odkazů
  • Výňatky
  • Přílohy
  • Vlastní pole a meta
  • GUID

WP-Optimize

Optimalizuje WordPress data typu:

  • Databáze
  • Obrázky
  • Verze příspěvků
  • Koš
  • A jiné…

Rank Math SEO

Celkem zajímavý program pro nastavení SEO a spolupráci s Google Search Console, do které se připojí po vyžádání přístupu a dále se postará o dohledatelnost ve vyhledávačích.

Šablony

Z četného výběru šablon je velmi obtížné najít si tu správnou. Většina šablon je si dost podobná a také obsahují vesměs stejnou konfiguraci webu. Najít šablonu, která vnukne webu šmrnc dá zabrat. Má kritéria jsou: jednoduchost, přehlednost a rychlost. I když jsem našel šablonu odpovídající nejvíce mým potřebám, stejně si ji ještě upravím pomocí CSS. Zásahy do kódu a úpravy jsou možné, jedná se o volnou licenci. Nedoporučuji mít zainstalováno velké množství šablon, systém by měl obsahovat výchozí šablonu Twenty Twenty a pak jen aktivní. Níže zmíněné fungují na verzi 5.5.

Zakra

Velmi přizpůsobivá a elegantní šablona. Do 8/2020 byla aktivní šablona webu. Přestože se mi líbila, byla moc složitá a přešel jsem na SMNTCS Retro.

Zakra

Můj CSS zápis:

html {scroll-behavior: smooth;}
pre.wp-block-preformatted {overflow:auto;background:#002343;color:lime;white-space:pre;}
aside#secondary {font-size:80%;}
*:target {color:red;}
article.post, *.entry-content {margin-bottom:2px; padding-bottom:2px;}
article.post h2.entry-title {margin-bottom:0px; padding-bottom:0px;font-size:26px;}
article.post .entry-content p {line-height:22px}
nav.navigation {background: #efefef;}
div.tg-site-header-bottom {margin-top: 0px; margin-bottom:0px;padding-top:0; padding-bottom:0;}
li.cat-item {margin:0; padding:0;line-height:16px;}
.entry-title {margin: 10px auto; auto;}
.entry-content ul.children li:first-child, #primary ul li:first-child {margin-top:10px; padding-top:0}
h2.entry-title a {display:block;font-size:90%;font-weight:600;text-decoration:underline;padding: 2px;}
.widget h2.widget-title {margin:5px auto; font-weight:600;}
.entry-meta {margin: 0px auto; font-size:75%;}
ul.wp-block-latest-posts__list li, ul.wp-block-categories-list li.cat-item, ul li {line-height:22px;margin-bottom:10px;}
a[href^="#"] {color: #001d52;text-decoration:underline;}
h1, h2, h3, h4, h5, h6 {clear:both;}
h1 {font-weight:700;margin-top:80px; margin-bottom:40px; font-style:normal;}
h2 {font-weight:600;margin-top:60px; margin-bottom:30px;}
h3 {font-weight:500;margin-top:50px; margin-bottom:25px;}
h4 {margin-top:40px; margin-bottom:20px;}
h5 {margin-top:30px; margin-bottom:15px;}
h6 {margin-top:25px; margin-bottom:12px;}
hr {margin-top:40px; margin-bottom:40px;clear:both;}
a.tg-scroll-to-top {color: white;}
a.wp-block-button__link {margin:0px; padding:5px;color:#0043ff; border: 2px groove grey;}
div.wp-block-buttons * {color:white;}
.cistic {clear:both;}
div.entry-content h1 {border-bottom:1px solid grey;}
primary ul {list-style-image:url('/moje/li1.png');}
primary ul ul {list-style-image:url('/moje/li2.png');}
primary ul ul ul {list-style-image:url('/moje/li3.png');}
primary ul ul ul ul {list-style-image:url('/moje/li4.png');}
div.nav-links {font-size:80%;}

SMNTCS Retro

Velice zajímavá a jednoduchá šablona s tmavým základem. Aktuální téma k datu 8/2020. Rozhraní je jednoduché a zábavné.

SMNTCS Retro

Vlastní patička

  • Stačí najít soubor template-tags.php.
  • Nachází se v: /wp-content/themes/smntcs-retro/inc.
  • Najdeme řádek function smntcs_retro_site_footer() {
  • $data[] = esc_html__( ‚Všechna práva vyhrazena‘, ‚smntcs-retro‘ );
  • esc_url( __( ‚https://mvecko.cz/o-me-autorovi/‘, ‚smntcs-retro‘ ) ),
  • esc_html__( ‚Napsal Martin Všaha‘, ‚smntcs-retro‘ )

Počeštění

U souboru template-tags.php se ještě pozastavím, protože je v něm také udané, jak se budou nazývat štítky, datum, kategorie a autor. To je dobré pro počeštění šablony. Vyskytují se zde také definice pro funkce:

  • smntcs_retro_post_date
  • smntcs_retro_post_author
  • smntcs_retro_post_tags
  • smntcs_retro_post_categories

Pro změnu definovaných textů stačí vyhledat příslušné řádky a změnit text.

Například původní znění v hlavičce zní:

  • Date:
  • Tags:
  • Categories:

Po přepisu na české nazvy:

  • Datum:
  • Štítky:
  • Kategorie:

Soubory pro uzpůsobení

Následující soubory se mohou hodit pro uzpůsobení webu a změnu zobrazovaného obsahu i jeho přidávání a ubírání. Vše je dobré před úpravami vyzálohovat. Význam souborů je patrný z názvů.

/wp-content/themes/smntcs-retro/

  • comments.php
  • footer.php
  • functions.php
  • header.php
  • index.php
  • single.php
  • style.css

Poznámka: při změně souborů šablony může dojít ke ztrátě změn v případě, že se šablona aktualizuje.

Řazení článků dle abecedy (tagy)

V souboru šablony template-tags.php stačí přidat řádek:

function sort_alphabetically_tag_page( $query ) {
        if ( $query->is_tag() && $query->is_main_query() ) {
           $query->set( 'orderby', 'title' );
           $query->set( 'order', 'ASC' );     } }
 add_action( 'pre_get_posts', 'sort_alphabetically_tag_page' );

Řazení článků dle abecedy (archiv)

V souboru functions.php stačí přidat řádek:

add_action( 'pre_get_posts', 'my_change_sort_order'); 
function my_change_sort_order($query){
     if(is_archive()):
      //If you wanted it for the archive of a custom post type use: is_post_type_archive( $post_type )
        //Set the order ASC or DESC
        $query->set( 'order', 'ASC' );
        //Set the orderby
        $query->set( 'orderby', 'title' );
     endif;    
 };

Řazení článků dle abecedy (kategorie)

V souboru functions.php stačí přidat řádek:

function foo_modify_query_order( $query ) {
     if ( $query->is_home() && $query->is_main_query() ) {
         $query->set( 'orderby', 'title' );
         $query->set( 'order', 'ASC' );
     }
 }
 add_action( 'pre_get_posts', 'foo_modify_query_order' );

ColorMag

Tato šablona mě zajímala především proto, že skýtala funkci podobných článků. Jinak je podobná Zakře a rovněž velmi přizpůsobivá.

Problémy

Ať chceme nebo ne, občas se prostě něco semele… 🙂

Překreslování průhledných .gif obrázků – černá místo průhledné

WordPress využívá pro transformaci a rendering obrázků modul, který zřejmě neplní svou práci tak, jak se očekává. Problém nastává při automatické změně a vytvoření velikosti obrázku .gif s průhledností, dle nastavení WordPressu (střední velikost a náhled). Originální velikost je v pořádku, ale ostatní varianty mají místo průhlednosti černou barvu.

Na tomto obrázku je patrná chyba změny velikosti obrázku, která nezachová průhlednost:

Já
Příklad černé barvy místo průhlednosti
Já
Originální velikost obrázku (vše je v pořádku)

Nechtěné odstranění anebo nevratná změna na webu

V tomto případě pomůže jedině kompletní záloha adresářové struktury webu a také databáze, jestliže zálohu nemáme, nelze změny vrátit.

Stalo se mi, že díky některým pluginům anebo jen špatným nápadům jsem si na webu vytvořil velké množství nežádoucího materiálu anebo jsem odmazal pomocí optimalizačních pluginů některá data. Konkrétně jsem smazal z databáze některé údajně nepoužívané obrázky a tím zmizel téměř veškerý grafický obsah z databáze médií. Naštěstí můj webhosting provádí každodenní zálohy databáze a tak nebyl problém vrátit vše do původního stavu. Přihlásil jsem se do databáze a importoval zálohu z nočních hodin. Sice jsem o něco málo přišel, ale to je jen malá daň.

Problémy se zdrojáky

Jednou jsem měl zničehonic problém s webem, který psal neznámou chybu. Bylo potřeba stáhnout zdrojová data z webu WordPressu a potřebné soubory rozbalit na server. Velikost arhivu verze 5.5 činí 13 MB.

Zamrznutí cca 10s při aktualizaci, publikování a ukládání

Stávalo se mi, že při ukládání konceptu, aktualizaci stránky a i publikaci stránky, se nejen WordPress, ale i celý web zasekl po dobu cca 10 sekund.

Závadu jsem diagnostikoval tak, že jsem vypl všechny pluginy a nastavil výchozí šablonu vzhledu. Poté jsem postupně zapínal pluginy a zkoušel.

Celý tento problém měl na svědomí plugin wp-limit-login-attempts. Jakmile jsem jej deaktivoval, vše bylo bez prodlev.

Migrace webu na jinou doménu

Ať už jsou důvody pro změnu domény jakékoli, je to celkem jednoduché.

Pro úspěšný přesun potřebujeme:

  • Přihlašovací údaje do původní DB a domény
  • Export původní DB
  • Kompletní zálohu původních souborů webu
  • Novou doménu s přístupem
  • Novou prázdou DB s přístupovými údaji
  • Funkční .htaccess na nové doméně

Postup pro přesun dat ze starého webu na nový je následující:

  1. Vyzálohujeme (vykopírujeme) celý obsah souborů původního WordPress webu.
  2. Vyexportujeme databázi původního WordPress webu.
  3. Vytvoříme novou databázi pro nový WordPress web a zaznamenáme si přihlašovací údaje.
  4. Nakopírujeme soubory WordPress webu na novou doménu.
  5. Upravíme soubor wp-config.php o přihlašovací údaje a název nové databáze.
  6. Naimportujeme původní databázi do nové.
  7. V nové databázi upravíme wp_options, kde jsou údaje o názvu URL a stránky.
  8. Přihlásíme se do administrace našeho nového WordPress webu (přihlašovací údaje viz. původní databáze).
  9. Stáhneme a zaktivujeme plugin Velvet Blues Update URLs a opravíme odkazy z původních URL na nové.
  10. Hotovo! 🙂

Nefungují permanentní odkazy – chyba 404

Příznaky:

  • Nefungují dřívější permanentní odkazy (články, kategorie, štítky a jiné).
  • Funguje pouze hlavní stránka.
  • Při volbě základního nastavení trvalých odkazů již vše funguje.

Důvod:

  • Doména nemá aktivní htaccess anebo je špatný.

Řešení:

  • Povolit v hostingu htaccess anebo jej smazat a nechat znovu vytvořit.
  • Přepnout styl permanentních odkazů na libovolný a vrátit zpět.

Další nastavení a vychytávky

Barva adresního panelu prohlížeče

Následující kód je nutné vložit do hlavičky webové stránky, barva je shodná s pozadím stránek Mvéčko.cz. V případě šablon budeme editovat například soubor header.php.

Vložíme kód:

<meta name="theme-color" content="#0f151c">
<meta name="msapplication-navbutton-color" content="#0f151c">
<meta name="apple-mobile-web-app-status-bar-style" content="#0f151c">

Stejná velikost písma štítků

WordPress a některé šablony zobrazují velikost písma pro štítky různě velké a to dle počtu příspěvků. Mě osobně se tato funkce nezamlouvá a výsledek nevypadá zrovna korektně. Proto jsem se rozhodl zapsat si můj poznatek k řešení tohoto problému. Tato funkce zvětšení písma je definována hluboko v parametrech, ale může se jednodušše upravit pomocí CSS.

Vizuální ukázka:

Úprava CSS pro stejnou velikost písma všech štítků v mém případě zní:

a.tag-cloud-link {font-size: 14px !important;} 

Parametr !important je zde pro to, aby přebyl veškeré ostatní nastavení velikosti písma.

Zakázání revizí

Omezení revizí, které se ukládají automaticky pro obnovu rozepsaného článku, lze pomocí definice v souboru wp-config.php. Jedná se o optimalizační prvek, stačí přidat řádek:

define ('WP_POST_REVISIONS', false);

Komentáře

Vypnutí komentářů na stránkách

Toto nastavení jsem prováděl na šabloně smntcs-retro a je možné, že některé funkce anebo soubory se mohou pro různé šablony lišit.

V umístění wp-content/themes/název_téma/template-parts jsou soubory:

  • content-page.php
  • content-single.php

V souborech je u konce řádek s voláním funkce komentářů, tuto funkci stačí zakomentovat a nebude používána:

// Display the post comments. Zakomentovani vypne komentare
#smntcs_retro_post_comments()