Logo

Wordpress

Je 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

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 i vyšší.

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:

Velvet

WP-Optimize

Optimalizuje WordPress data typu:

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.

Náhled přizpůsobené šablony Zakra

Mé CSS úpravy

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

Náhled přizpůsobené šablony SMNTCS Retro

Vlastní patička

Stačí najít soubor template-tags.php, který se nachází v umístění /wp-content/themes/smntcs-retro/inc. V tomto souboru najdeme řádek function smntcs_retro_site_footer() { a vhodně doplníme anebo zaměníme podstatnou část:

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

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

  1. Date:
  2. Tags:
  3. Categories:

Po přepisu na vlastní názvy můžou vypadat kategorie následovně:

  1. Datum:
  2. Štítky:
  3. 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/

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á 2 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.

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í při aktualizaci, ukládání a publikování článku

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é, ale při neopatrném postupování mohou nastat velké potíže.

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

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:

Důvod:

Řešení:

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.

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

Výchozí zobrazení štítků
Upravené zobrazení štítků - klasické

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

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:

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