WordPress

Kategorie: Web, WWW

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.

Obsah:

  1. Pluginy
    1. Contact Form 7
    2. File Upload Types
    3. Sort posts by alphabetical order
    4. Velvet Blues Update URLs
    5. WP-Optimize
    6. Rank Math SEO
  2. Šablony
    1. Zakra
    2. SMNTCS Retro
    3. ColorMag
  3. Problémy
    1. Nechtěné odstranění anebo nevratná změna na webu
    1. Problémy se zdrojáky
  4. Migrace webu na jinou doménu
  5. Další nastavení a vychytávky

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.

Zajímavé pluginy jsou:

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

Moje CSS úpravy

html {scroll-behavior:smooth; font-size:70%;}
site-description h2 {font-size:85%;}
*#menu-hlavni, div#header-menu-wrapper {margin:0px;padding:0px;}
respond {max-width:400px; margin:20px auto;}
main h1.post-title {border:none;text-align: center;}
main h1 {font-size:26px;font-weight:600;border-bottom:1px solid grey;}
main h2 {font-size:24px;font-weight:600;}
main h3 {font-size:20px;font-weight:500;}
main h4 {font-size:16px;font-weight:500;}
main h5 {font-size:13px;font-weight:500;}
h1, h2, h3, h4, h5, h6 {clear:both;color:#e9e9e9;}
site-description h2 {font-size:12px;}
hr {color:white;clear:both;}
main article.post {padding:0px;margin:0px;}
main hr {max-width:20%;margin:20px auto;}
a.wp-block-button__link:hover {border-bottom:0px;}
form {max-width:400px; margin:10px auto;}
*.stitky {font-size:18px;}
p #comment {max-height:80px;}
a:link {text-decoration: underline dotted;border-bottom:none;color:#cfe5ff;}
a:hover {text-decoration: underline;color:white;}
a:visited {color:#cfe5ff;}
main#site-content article h2 {font-size:22px;margin:8px auto}
main#site-content article {margin:0 auto 35px auto;}
.wp-block-audio audio {display:block;max-width: 600px;width:90%; margin: 10px auto;}
div#site-footer {width:70%; margin: 20px auto;font-size:11px;}
a[target="_blank"]:after {content: " ⇗";}
a.tag-cloud-link {font-size: 14px !important;}
p, li, table {color:#e9e9e9;}
figcaption {font-size:90%; text-align:center;}
body {background:#0f151c;}
pre {padding:10px;margin:10px 10px 10px 35px;color:#e9e9e9;white-space:pre;overflow:auto;}
code {color:#e9e9e9;}
.centr {display: block; text-align:center; margin: 5px auto;}
.post-tags , .post-date , .post-categories {font-size:90%;color:#b0b0b0;}

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

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

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.

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

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