Ze šuplíku (7): Psaní článků, vizuální versus HTML editor

closeThis post was published 3 years 7 months 11 days ago which may make its actuality or expire date not be valid anymore. This site is not responsible for any misunderstanding.

Na počátku vzniku webu obvykle stojí nápad, na jehož základě začne vznikat obsah, a pro ten je třeba vytvořit funkční prostředí, kde bude představen – vlastní webová prezentace. Pro tuto prezentaci jsme společně jako nástroj zvolili právě WordPress. Obsah může existovat před zahájením tvorby webu nebo až po jeho zprovoznění, bez počátečního nápadu by to však samozřejmě nešlo a hlavně nemělo smysl.

Ze šuplíku vytahuji vybrané kapitoly nevydané knihy, které (snad) ještě mají co říci i dnes.
(Varování: Stav textu odpovídá roku 2010! Aktualizace by byla příliš náročná, omluva předem.)
Jen občas se něco málo pokusím oprášit…

Tvořit obsah lze ve WordPressu prakticky hned po instalaci, ale další technické úpravy, o nichž bude řeč v daších článcích, nám pomáhají dosáhnout co nejlepších výsledků a předem eliminovat možné problémy, s nimiž se publikující autor může setkat. V tento okamžik se však již skutečně zaměříme na zmíněnou tvorbu obsahu webu, což je ve WordPressu realizováno dvěma základními způsoby: v podobě přidávání článků a také tvorbou jednotlivých stránek. Po instalaci je jako ukázka připravena stránka „O mně“, stejně jako zde bývá vložen první ukázkový článek „Ahoj všichni!“ a první komentář.

Jak jste si mohli všimnout, v levém horním rohu administračního prostředí máte v submenu pod názvem vašeho webu volbu „Zobrazit web“. Kliknutím na tento odkaz nebo na název se dostanete na hlavní stránku, tzv. homepage, kde již najdete zmíněný jeden uvítací článek, komentář a stránku, které můžete samozřejmě kdykoli upravit nebo vymazat. Zpět do administrace se lze vrátit například přes volbu Nástěnka atp. v horním panelu, případně přes odkaz Edit (Upravit) u článku a opět i v hodním menu (Upravit příspěvek), který vás přivede přímo k úpravě příslušného článku, a pokud není jiná cesta, pak stačí do okénka prohlížeče zadat cestu: www.vasweb.cz/wp-admin/ a dostanete se opět na nástěnku administračního rozhraní, případně na přihlašovací stránku.

Rychlý přehled, který ve WordPressu 3.x vidíte na zmíněné nástěnce, vás informuje, že máte 1 příspěvek, 1 stránku a 1 rubriku (Nezařazené), rovněž zmíněný 1 komentář, který je schválený. V nastavení komentářů se totiž můžete rozhodnout, zda komentáře u článků webu povolíte, komu je povolíte (všem nebo jen registrovaným uživatelům), zda je budete moderovat – schvalovat atp. Toto zmíněné nastavení je přístupné v menu Nastavení – Komentáře. Pokud byste nastavili nějaký způsob schvalování komentářů, viděli byste neschválené položky na nástěnce mezi čekajícími. Červená položka ukazující příchozí komentářový spam se vám pravděpodobně začne plnit až časem, až váš web vejde více ve známost, a poté, co aktivujete jeden ze dvou pluginů, který je součástí instalace WordPressu, tzv. Akismet, jemuž se budeme věnovat v příslušném článku.

Píšeme první článek

Nástěnka je vhodným výchozím místem, odkud můžete vstupovat do jednotlivých oddílů administrace. Pokud se vydáte klasickou cestou, pak pro tvorbu prvního článku jednoduše v levém bočním menu klikněte na volbu Příspěvky (Články, anglicky Posts – záleží na překladu) a v rozbaleném podmenu vyberte volbu Přidat nový. Otevře se před vámi formulář pro vkládání příspěvku s celou řadou doplňujících voleb.

Začneme od dvou nejdůležitějších částí. První je nadpis článku, který je nevrchnější kolonkou a jenž volíte libovolně podle našich potřeb. Vzhledem k tomu, že jsme se však výše naučili vytvářet „hezké adresy“ (SEO URL), pamatujte na to i při tvorbě nadpisu a snažte se o přiměřeně dlouhé, výstižné pojmenování, které bude v ideálním případě obsahovat několik vybraných klíčových slov. Slova použitá v nadpisu se při zapnutých „hezkých adresách“ stanou součástí odkazu na článek, a tudíž vhodným ukazatelem pro indexující roboty vyhledávacích služeb.

Ať již jste si článek předepsali předtím nebo jej budete vytvářet až nyní, vložte jej do dalšího, vzhledově největšího formulářového okna. Nejprve však bude dobré si toto okno blíže prohlédnout. Nad okénkem vpravo můžete přepínat mezi dvěma možnostmi, první je označena Editor a druhá HTML. Pokud potřebujete vkládat texty a obrázky podobným stylem jako ve Wordu a HTML vám moc neříká, pravděpodobně budete využívat volbu Editor.

Jedná se o tzv. vizuální editor, kde si nemusíte lámat hlavu s HTML značkami, které pomáhají formátovat text. Může se vám však stát, že ne všechno bude vypadat tak, jak byste potřebovali. Chcete-li do textu vložit kus HTML kódu, pak vám však pro správné zobrazení nezbude nic jiného, než se přepnout do HTML editoru a příslušný kód vložit v něm. Předpokládám však, že ten, kdo se rozhodne tvořit stránky ve WordPressu, již určité povědomí o rozdílech mezi vizuálním a HTML editorem má, proto se dalšími podrobnostmi nebudu zabývat.

 

Tip Osobně se musím přiznat, že vizuální editor (tj. WYSIWYG, zde konkrétně TinyMCE) obvykle nepoužívám vůbec, proto jej rovnou při nastavování WordPressu vypínám, aby se mi pak nepletla dvě okénka. Podmínkou využívání výhradně HTML editoru je samozřejmě znalost HTML tagů, avšak to jistě pro většinu pokročilejších nebude problém, a všem, kdo do tajů HTML náhodou ještě ani nenahlédli, doporučuji tak učinit například na proslulých stránkách www.jakpsatweb.cz. A kde se zmíněný vizuální editor vypíná? V levém menu administrace klikněte na Uživatelé, dále Přehled uživatelů, a u každého uživatele v jeho Osobním nastavení máte jako první volbu defaultně prázdné okénko vedle popisku Vizuální editor. Pokud okénko zaškrtnete, aktivujete volbu Vypnout vizuální editor a ve formuláři tvorby příspěvku vám automaticky zmizí záložka Editor a zůstane pouze prostředí HTML. Tato volba se vám vyplatí kromě jiného v okamžiku, kdy budete chtít i do příspěvků vkládat například funkční PHP kód a pro tento případ si na pomoc vezmete př. oblíbený plugin Exec-PHP, který při zapnutém vizuálním editoru ukazuje chybovou hlášku, kterou lze sice u nových verzí odstranit v jeho nastavení, přesto je nutné nezapomínat, že php kód je třeba vkládat výhradně do okénka HTML editoru. S pluginem Exec-PHP lze do příspěvku vkládat snadno například i JavaScripty a další kódy. Vypnutí a zapnutí vizuálních editorů u jednotlivých uživatelů oceníte například ve chvíli, kdy spolu s vámi na webu budou psát další autoři a redaktoři, jimž naopak snadná obsluha vizuálního editoru bude mnohdy příjemnější.

 

Pokročilí Ve WordPressu 3.x se jako zmíněný vizuální editor využívá TinyMCE. Jak se dočtete v nápovědě: „TinyMCE je HTML WYSIWYG editor, založený na Javascriptu. Je nezávislý na platformě, na které běží a je šířen jako OperSource software (pod licencí LGPL). Vyvíjí jej Moxiecode Systems AB. Je schopen převádět obsah textových polí nebo jiných prvků na HTML kód a naopak.“

 

Obr. Vizuální editor ve WordPress 3.x s otevřenými rozšířenými volbami

Třebaže jsem se výše přiznala, že vizuální editor prakticky nevyužívám, přesto je jeho existence pro běžného uživatele přínosná, a tak se podíváme, jaké volby nám ve verzi WordPress 3.x nabízí. Zleva doprava jsou zde seřazena tlačítka, umožňující různé úpravy textů a vkládání specifických formátovacích značek i celých bloků.

Tlačítko B pro tučný text nebo I pro kurzívu jsou stejné jako v celé řadě běžných textových editorů. Pokračuje přeškrtnutý text a seznamynečíslovanýčíslovaný. Tlačítkem s uvozovkami lze jednoduše vložit textový blok, následuje zarovnání doleva, na střed a doprava. Řetěz a rozdělený řetěz na tlačítku ukazují na možnost vkládání a odebírání hypertextových odkazů.

Následující tlačítko s oddělením hlavičky od pokračování textu doporučuji využívat, protože umí oddělit záhlaví textu od jeho pokračování, a to tak, že vloží do textu rozdělující značku <!– more–>, což oceníte u celé řady vzhledů na homepage, a také v archivech. Touto značkou totiž zamezíte, aby se na hlavní stránce a nebo v archivech zobrazoval celý text, zobrazí se zde pouze text, který napíšete před touto značkou. Některé vzhledy mají zobrazování textu na homepage vyřešeno jinak, ale v archivech zobrazování ošetřeno nebývá, proto je nejlépe se tlačítko „more“ naučit využívat od počátku. Stránky pak budou působit profesionálně a nebudou zahlcovat čtenáře příliš obsáhlými, kompletními texty tam, kde to není nutné.

Kontrola pravopisu (tlačítko ABC) v základním nastavení bez úprav či přidání pluginu funguje pouze pro několik málo jazyků, samozřejmě pro angličtinu, avšak čeština mezi nimi není. Pokud chcete kontrolovat vkládané texty po stránce pravopisné, je lepším řešením spíše využít nějaké nadstavby prohlížeče než tohoto interního nástroje. Například prohlížeče Opera nebo Firefox nabízejí ve svých rozšířeních poměrně slušné nástroje pro kontrolu českého pravopisu, kterým se ani případná česká verze této vnitřní pomůcky v rámci WordPressu asi ještě dlouho nevyrovná.

Pokud se vám zdá být okénko na psaní příliš úzké, můžete jej tlačítkem s malou obrazovkou a šipkami přepnout na plnou šíři okna svého prohlížeče a stejnou volbou zase vrátit následně zpět. Vidíte-li ve svém administračním rozhraní na rozdíl od obrázku výše jen jeden řádek tlačítek, je to tak správně, protože na obrázku jsou již aktivovány rozšířené volby, které získáte, když kliknete na tlačítko úplně vpravo. Tato volba zobrazuje nebo skrývá další, rozšířenou nabídku tlačítek, která zvyšuje komfort při psaní textů. Umožňuje formátovat odstavec a určovat hierarchii textu, zejména za pomoci využívání nadpisů. Další volbou je podtržené písmo, zarovnání do bloku či volba barvy textu.

Při vkládání textu z Wordu se vám obvykle do textu přidá i nehezké formátování, proto zde máte tlačítko, které této chybě zamezí, využít můžete také vložení čistého textu, bez formátování. Guma odstraní formátování vybraného textu, pod řeckým písmenem omega se skrývá možnost rozšířeného vkládání méně obvyklých znaků (př. zlomků, uvozovek, přehlásek). Rozšíření známé z textových editorů umožňuje rovněž odsadit text a zpětně naopak zmenšit jeho odsazení, šipky směřující doleva a doprava ukazují na možnosti vrátit úpravy vzad a vpřed, pod otazníčkem je možné najít stručnou, do češtiny obvykle přeloženou nápovědu pro využívání vizuálního editoru.

 

Pozor!!! I když jsem to v textu výše zmínila, speciální upozornění se týká kopírování textů, které jste si připravili v MS Wordu  do příspěvku. Ve Wordu jsou texty „obaleny“ ještě řadou formátovacích značek, které se při běžném kopírování vloží do okénka příspěvku též. Možným řešením je psát texty buď v jednoduchém editoru (např. Poznámkový blok) nebo vkládat text pomocí speciální ikonky, kterou najdete v rozšířených volbách vizuálního editoru (ikonka s dvojtým W, charakteristickým pro MS Word).

 

Obr. HTML editor ve WordPressu 3.x

 

 

Rozhraní HTML editoru je úspornější, vychází z předpokladu, že většinu rozšířených voleb si znalec HTML kódování vloží podle svých potřeb, nicméně základní nabídka je obdobná té, kterou jsme si představili u editoru vizuálního. Písmenko b pro tučný text, i pro kurzívu, link pro zjednodušení vkládání hypertextových odkazů, b-quote pro blokovou citaci v textu. Přeškrtnuté del symbolizuje volbu přeškrtnutí textu, ins danou část textu podtrhne, za pomoci img vložíte URL obrázku, ul pomáhá s nečíslovaným seznamem, ol naopak nabízí jeho číslovanou obdobou. Tlačítko code lze využít pro vkládání libovolného zdrojového kódu. O možnosti vložení značky <!– more–> za pomoci tlačítka „more“ již bylo psáno výše, rozdělí text na dvě části, z níž část nad touto značkou se při běžném nastavení zobrazí (na homepage či v archivech) a na jejím konci se objeví výzva k pokračování na celý obsah textu – Read more… (Číst více…) či jakkoliv si tuto pasáž v rámci úpravy vzhledu přeložíte), druhá se objeví až při „rozkliknutí“ zobrazení celého článku. Tlačítko kontrola příliš u českého textu nevyužijete, protože je to služba, která využívá cizojazyčného lingvistického slovníku www.answers.com. Rozhodně se však může vyplatit zkontrolovat text za pomoci tlačítka „uzavřít značky“, který zjistí, zda jste nezapomněli některý z párových html tagů otevřený. A konečně v novějších verzích i zde přibyla volba celá obrazovka. Žádné další rozšířené volby zde nejsou, fungovat vám zde však bude většina běžných libovolných HTML tagů, i těch, které v základní nabídce nenajdete.

Nyní je již další výběr mezi editory na vás. 🙂



Přečtěte si také:



Kategorie : Šuplík, WordPress
Štítky:, ,

Okomentovat

Pro vkládání komentářů musíte být přihlášen/a.