TinyMCE Advanced plugin je textový editor wordpress. Vizuální editor WordPress TinyMCE Advanced, popis a nastavení

Ahoj všichni!

Dnes vám povím o pluginu Ultimate tinyMCE, který vám umožňuje výrazně rozšířit funkce standardního vizuálního editoru wordpress.

S pluginem Ultimate tinyMCE si můžete vybrat vhodné textové písmo, určit jeho velikost, zpracovat obrázky a videa funkčněji.

Při psaní článku odkládejte různé emotikony na správná místa a mnoho dalšího. A i když nejste zastáncem extra pluginů, pak v tomto případě bude pro vás článek užitečný, protože. v něm vám ukážu, jak implementovat některé funkce pomocí normálních kódů.

Takže, začněme! Každý, kdo pracuje s wordpress enginem, moc dobře ví, jak vypadá pracovní panel standardního vizuálního editoru:

To zahrnuje minimální sada funkce, které webmasterům umožňují psát a publikovat užitečný materiál na svém blogu. Osobně jsem se standardní sadou funkcí WordPress editoru celkem spokojen, ale ne každému vyhovuje a raději používá jiné editory nebo programy.

Ultimate TinyMCE plugin. Vylepšení vizuálního editoru wordpress

Můžete si stáhnout plugin Ultimate TinyMCE. Dále jej nainstalujte na svůj blog a aktivujte jej. Kdo neví, jak se instalují pluginy, . Po instalaci a aktivaci pluginu se na administrativním panelu vašeho zdroje objeví další karta Ultimate TinyMCE:

Přejděte na kartu a uvidíte působivý seznam různých tlačítek, z nichž každé je vybaveno specifickou funkcí. Nyní můžete vylepšit svůj vizuální editor o kteroukoli z chybějících funkcí, které jsou v pluginu přítomny.

Nebudu popisovat každé tlačítko, protože. většina z nich byla přeložena do ruštiny a každý z vás si s nimi poradí sám. Jediné, co stojí za zmínku, je jejich implementace na blogu.

Aby se určité tlačítko zobrazilo v pracovní panel vizuální editor, stačí naopak ve sloupci „Povolit“. požadované tlačítko nastavte zaškrtávací políčko. Kromě toho vám plugin nabízí, abyste si sami vybrali umístění tlačítek, což lze provést ve sloupci „Výběr řádku“:

Jak jste si jistě všimli, všechna tlačítka v panelu editoru jsou umístěna ve dvou řádcích, ale díky Ultimate tinyMCE můžete zvýšit počet řádků na čtyři, ale ne více. Tomu napomáhá hodnota „ROW“, což v překladu znamená „Řádek“.

Ve výchozím nastavení je každá položka nastavena na "ŘÁDEK 1". Pokud vše ponecháte beze změny, funkce v podobě tlačítka bude pokračovat na prvním řádku panelu vizuálního editoru a zobrazí se až na úplném konci, za všemi standardními funkcemi.

Pokud vyberete ze seznamu např. hodnotu „ŘÁDEK 3“, přesune se tlačítko s funkcí na třetí řádek. Myslím, že je to pochopitelné! Aktivace všeho doplňkové funkce(Napočítal jsem 53) a rozházel je podél čar, dostal jsem tento obrázek:

Působivé, že? A zapomněl jsem zmínit, že při přidávání nebo odebírání jakékoli funkce nezapomeňte stisknout tlačítko „Update Buttons Options“ úplně dole v pluginu pro uložení nastavení.

Jak rozšířit funkčnost vizuálního editoru wordpress o kód

Jaké funkce lze tedy přidat pomocí kódu a jak to udělat?

1. Můžete přidat "Rodinu písem", tzn. můžete si ze seznamu vybrat písmo, které potřebujete, a napsat s ním celý příspěvek nebo krátkou pasáž. Chcete-li implementovat tuto funkci, otevřete soubor functions.php pro úpravy (cesta k souboru: /wp-content/themes/theme (šablona) název/functions.php).

Pozor: před úpravou souboru functions.php to udělejte, abyste předešli nesprávným akcím!

Po otevření souboru najděte značku na samém konci: ?> a těsně před něj vložte tento kód:

Uložte soubor a přesuňte jej zpět do složky motivu blogu, kde nahraďte starý.

2. Přidejte tlačítka vodorovného oddělovače, tlačítka horního a dolního indexu, velikost písma, změnu stylů a barvu pozadí. Chcete-li to provést, přidejte do stejného souboru functions.php před stejnou značku?> následující sekci kódu:

Poté soubor znovu uložíme a přesuneme zpět na server, kde nahradíme starý. Aktualizujeme stránku pomocí vizuálního editoru a uvidíme, co máme:

To je pro mě vše a nyní také víte, jak přidat funkční tlačítka do editoru wordpress a rozšířit tak jeho standardní funkce! Přeji vám všem hodně štěstí! Nashledanou a brzy na viděnou!

Jak se vám článek líbí? Možná znáte další možnosti, jak zlepšit standardní funkce vizuálního editoru WordPress? Sdílejte je se čtenáři blogu jako komentáře k tomuto příspěvku.

Jednou jsem zvažoval zajímavý projekt - vizuální editor pro vytvořit wordpressšablonu přímo od administrátora. Dnes budu mluvit o podobném, ale funkčnějším a výkonnějším produktu -. Toto je samostatná verze Pinegrow, profesionálního desktopového webového editoru, který se používá k vytváření webových stránek s odezvou, skripty, Bootstrap a dalšími funkcemi. Pinegrow WP je tedy speciální doplněk, který umožňuje vytvářet WordPress šablony.

Klíčové vlastnosti Pinegrow WP:

• Převod statických rozvržení HTML na WordPress témata- vyberte určité prvky šablony a vyberte pro ně příslušné parametry.
• Vytváření WP šablon od začátku pomocí vizuálního editoru – stačí přidat na stránku potřebné prvky (boční panel, seznam příspěvků atd.)

• Podpora pro 175 WordPress tagů - umožňuje rychle najít pro HTML prvky rozvržení požadovaných hodnot (název příspěvku, datum, jméno autora).
• Podpora pluginů a funkcí PHP — jako parametry prvků si můžete vybrat nejen WordPress tagy, ale také nastavit proměnné, přidat PHP funkce.
• Živé zobrazení vytvořený WordPressem motivy vám umožní vidět, co se stane po nastavení.
• Prohlédněte si vygenerovaný PHP kód pro rozvržení.

Kromě toho můžete přímo pracovat s obsahem svého webu WordPress importováním obrázků do Pinegrow WP. Na výstupu získáte čistý PHP / HTML kód, služba žádný nepřidává extra prvky k základnímu rozložení.

Zde je krátké video, jak Pinegrow WP funguje:

Tento software si můžete sami vyzkoušet. Chcete-li to provést, stáhněte si program z oficiálních stránek (existují verze pro Windows, Mac a Linux). Po instalaci si vyžádejte bezplatný dočasný licenční klíč (na 7 dní). Zadejte heslo, které vám přijde e-mailem, a dostanete se do systému.

V nastavení (ikona ozubeného kola) Framework & Plugin Manager pro index.html označte WordPress, poté nějaké nahrajte HTML šablona. Dále klikněte na určité prvky rozložení a vyberte vhodné Funkce WordPress. Například: pro obrázek — the_post_thumbnail, pro nadpis — the_title, pro datum — the_date atd. To znamená, že uživatel nemusí vědět, jak přesně nastavit ten či onen prvek ve WordPressu, stačí jej vyhledat v dostupných funkcích a přidat do layoutu. Nastavením všech bloků na stránce na příslušnou hodnotu získáte funkční WordPress šablonu pro export. Algoritmus je přibližně stejný, i když se budete muset podrobněji zabývat programem Pinegrow WP (existuje spousta různé funkce a nastavení).

Obecně je Pinegrow WP velmi výkonný, ale není zdarma. Osobní licence (pro 3 počítače) stojí 99 USD. Můžete jej použít pro tolik projektů, kolik chcete! Existují licence pro firmy a vývojové týmy. V zásadě je pro tyto účely program potřebný – pokud se vy nebo vaše společnost profesionálně věnujete tvorbě stránek (včetně WordPressu), pak vám tento software přijde vhod.

Ahoj všichni!. Dnes si povíme o místě, kde blogováním strávíte obrovské množství času. Toto místo - ! Ostatně právě v něm budete psát nové příspěvky a zveřejňovat je na svém blogu. WordPress poskytuje dvě verze editoru – vizuální a textovou. Zvažte vlastnosti každého z nich a naučte se přidávat nové funkce.

WordPress Visual Editor a Ultimate TinyMCE Plugin

Vizuální editor wordpress se podobá vzhledu a Funkce slov kterou zná téměř každý. Bohužel je jeho funkčnost ve výchozím nastavení velmi omezená, což značně omezuje vaše možnosti formátování textu. Tento problém Plugin Ultimate TinyMCE odvádí skvělou práci při přidávání velkého množství nejrůznějších nových tlačítek.

Plugin je nainstalován standardně - stáhněte si Ultimate TinyMCE, rozbalte archiv a nahrajte složku se soubory pluginů na server do adresáře wp-content/plugins. Aktivujte a přejděte do jeho nastavení v sekci "Možnosti" - "Ultimate TinyMCE".

Ve výchozím nastavení jsou všechna tlačítka ve vizuálním editoru WordPress uspořádána ve dvou řadách. Pro zobrazení druhého řádku použijte tlačítko Show/Hide. přídavný panel". Funkčnost každého tlačítka můžete odhadnout podle ikony na něm nebo podle popisku, který se zobrazí, když na něj najedete kurzorem myši. Ultimate TinyMCE přidává asi 40 dalších nových funkcí a dvě další řady tlačítek.

Ve skutečnosti všechna nastavení Ultimate TinyMCE spočívají v označení tlačítek, jejichž funkčnost potřebujete, a výběru řádku pro ně. Popis v nastavení anglický jazyk, ale po jejich přidání do editoru budou tipy v ruštině. I když ve většině případů na to můžete přijít bez jakýchkoliv výzev.

Pouze uvažovat další možnosti, které jsou uvedeny úplně dole v nastavení:

Změňte barvu editoru— změní barvu bloku tlačítek ve vizuálním editoru WordPress.

Povolit tlačítko NextPage (PageBreak).- Přidá funkci NextPage pro .

Přidat sloupec ID do seznamu správců stránek/příspěvků- na stránku WP admin je přidán nový sloupec se seznamy všech článků a příspěvků, který uvádí ID každého blogového příspěvku / stránky. Umíš číst .

Povolit použití krátkých kódů v textových oblastech widgetu- umožňuje použít "krátký kód" ve widgetu "Text". Krátký kód (shortcode) je určen pro rychlé přidání kód, Galerie NextGEN a další pluginy do textu stránky.

Use PHP Text Widget - umožňuje používat php kód V . Kód je interpretován a výsledek jeho práce je zobrazen na stránce blogu.

Enable Line Break Shortcode – přidá značku Break do krátkých kódů, která je určena k přidání prázdného řádku do textu.

Povolit krátké kódy sloupců – přidá se do „Krátkých kódů“ velký počet tagy odpovědné za tvorbu textových sloupců.

Povolit tlačítko Advanced Insert/Edit Link- přidává pokročilou schopnost vkládat / upravovat odkazy.

Enable "Div Clear" Buttons - přidá tlačítka Div Clear, levé i pravé tlačítko určené ke zrušení zalamování prvku, které se nastavuje pomocí vlastnosti float.

Odebrat značky p a br – deaktivuje automatické vkládání značky p (odstavce) a br (odřádkování). Pokud nechcete značku p zadávat ručně pro každý odstavec, je lepší na tuto volbu nesahat.

Přidat Signoff Shortcode – můžete nastavit často používanou frázi a vložit ji do článků pomocí značky Signoff from Shortcodes.

Textový editor WordPress a pluginy Post Editor Buttons a AddQuicktag

Mnoho lidí považuje kód vytvořený ve vizuálním editoru WordPress za špinavý, to znamená, že obsahuje zbytečné tagy a styly, které by měly být v dobrém slova smyslu umístěny do souboru stylů použitého WP tématu. Textová verze editoru WordPress vám dává větší moc nad kódem. Tam se všechny tagy vkládají ručně, s výjimkou tagů odstavce (p) a line feed (br) se přidávají automaticky.

Vše je v pořádku, ale funkčnosti je opět málo. Chcete-li se s tímto problémem vypořádat, můžete použít plugin Post Editor Buttons.

Stáhněte si nejnovější verzi Post Editor Buttons. Plugin je standardně nainstalován. Nastavení pluginu žije na adrese "Parametry" - "Tlačítka editoru příspěvků".

Všechno je tam velmi jednoduché:

• Titulek - název tlačítka, které přidáváme;
• Před - otevírací značka;
• Po je uzavírací značka;
• Smazat - smazat.

Pardon, na mém blogu Tlačítka editoru příspěvků nefungují. V něm vytvořená tlačítka se prostě nepřidávají. Byla to skvělá alternativa Přidat plugin Quicktag.

Stáhněte si nejnovější verzi AddQuicktag . Plugin se instaluje standardně, jeho nastavení se nachází ve stejnojmenné sekci "Parametry" - "AddQuicktag". Přidány čtyři nové sloupce možností, které ani nepoužívám.

Hlavní jsou stejné:

• Button Label - název;
• Start Tag (s) - úvodní tag;
• End Tag (s) - uzavírací tag.

Děkuji za pozornost! To je vše. Opatruj se.

Tato příručka je kompletní, obsahuje však odkazy na materiály, které dosud nebyly publikovány. Prosím, nelekejte se, pokud se některý z odkazů neotevře. Všechno bude brzy fungovat! 🙂

S pozdravem, Alexander.

Vizuální editor je nejpohodlnější a rychlý způsob zveřejnění materiálů na webu. Používá se při vytváření příspěvků a stránek, některé pluginy jej využívají i ve svém nastavení.

Možnosti vizuálního a textového režimu editoru jsme si krátce zopakovali v poznámce a nyní pojďme trochu hlouběji a projdeme si hlavní tlačítka.

Jakmile nainstalujete WordPress, editor bude vypadat velmi špatně a nefunkční:

Omlouvám se, ale některé obrázky schválně oříznu na výšku, abych nenatahoval už tak dlouhé články. Pokud ve spodní části obrázku vidíte ostrý zlom, znamená to, že tam není nic užitečného. V některých konkrétní případy budu tomu věnovat pozornost.

Obecně, jak vidíte, editor nenabízí tolik tlačítek, jak bychom si přáli. Ale i ty stačí k efektivní práci s materiály.

Vše, co potřebujete pro základní formátování, je zde:

• Výběr textu tučně, kurzívou a přeškrtnutím
• Odrážkové a číslované seznamy
• Zvýrazněte text jako citát s dekorací
• horizontální dělicí čára
• Zarovnat text doleva, na střed a doprava
• Vkládání a mazání odkazu
• Tlačítko přerušení stránky
• Tlačítko pro aktivaci dalších funkcí
• Tlačítko celé obrazovky

Tato tlačítka fungují ve dvou režimech, zvažte oba.

Příklad 1

Pochopení toho, jak tato metoda funguje, je velmi jednoduché: na panelu nástrojů kliknete na požadovaný design a začnete psát. Tlačítko je vizuálně stisknuté a zdá se, že je stisknuté.

Jakýkoli text, který bude zadán v tomto režimu, automaticky obdrží možnost návrhu, která je aktivní na panelu nástrojů.

Podívej se:

Napsal jsem první dvě věty bez stisknutí tlačítka [B], napsal je a stiskl Enter. V editoru se vytvořil nový prázdný odstavec, před jehož zadáním jsem klikl na tlačítko tučného stylu a začal zadávat text.

Všechno, co jsem zadal, se automaticky stalo tučným. Abyste aplikaci tohoto stylu zakázali, stačí pustit tlačítko a další postavy již budou bez dekorace.

Všechny ostatní možnosti designu fungují stejným způsobem.

Příklad 2

Existuje jiný způsob, který je (podle mého osobního názoru) pohodlnější a rychlejší. Spočívá v tomto: nejprve napíšete list textu bez návrhu a poté svůj text navrhnete, jak chcete.

Stejný text bych mohl nejprve jednoduše napsat:

Poté musíte vybrat odstavec, který chci označit tučným písmem, a kliknout na příslušné tlačítko na panelu nástrojů:

Poté bude náš odstavec tučný. K tomu nemusíte stisknout tlačítko [B] - návrh se automaticky aplikuje na veškerý vybraný text.

Příklad 3

WordPress, stejně jako Microsoft Word, umožňuje provádět různé akce nikoli pomocí myši, ale pomocí klávesových zkratek. Každá akce má svou vlastní sadu tlačítek, jejichž stisknutím se aplikují určité styly.

Pokud jsme například ve druhém příkladu tohoto návodu nestiskli tlačítko [B] na panelu nástrojů, ale použili kombinaci „Ctrl“ a „B“ (psáno jako Ctrl + B, tlačítko „B“ je anglické, od slova „Tučné“), pak by se na náš odstavec okamžitě použil tučný výběr.

Na konci této příručky bude materiál o klávesových zkratkách.

Aktivace dalších tlačítek

V určité chvíli si uvědomíte, že vám chybí současné možnosti editoru a chtěli byste v textu zvýraznit text podtrženým stylem nebo nastavit nadpisy. Chcete-li to provést, musíte aktivovat další panel nástrojů.

Najít toto tlačítko:

Zobrazí se druhá řada tlačítek, která do vašeho editoru přidávají nové funkce:

Zde již můžeme pozorovat další možnosti pro stylizaci textu je projdeme zleva doprava:

• Vytvářejte tituly kterékoli ze šesti dostupných úrovní
• Podtržení textu
• Zarovnat text na šířku stránky
• Nastavit barvu textu
• Aktivujte režim vkládání textu ze schránky bez formátování
• Vymazání formátování vybrané části textu
• Vkládání speciálních znaků
• Odebírání a přidávání odsazení vlevo od odstavců
• Vraťte zpět nebo opakujte předchozí akci
• Nápověda pro editora

Jak je vidět, těchto možností je pro práci na textu a jeho designu opravdu dost.

Vítám vás na stránkách blogu. V tomto článku vám řeknu, jak můžete nahradit a zároveň opravit standard Vizuální editor příspěvků WordPress. Začněme tedy standardem textový editor v jádru nic víc než obvyklé Slovo, které každý z nás používal, ale pouze ve velmi zjednodušené podobě. Pro mnohé je prostě nepohodlné psát články, když mají jen pár tlačítek pro zdobení jejich příspěvků, a proto mnozí začnou studovat, aby si v kódu předepsali, co chtějí, ale tady na ně čeká háček.

HTML editor umožňuje používat ne všechny známé značky, ale pouze ty hlavní. Mimochodem, zde je seznam těch značek, kterým editor WordPress rozumí: address, a, abbr, acronym, area, article, aside, b, big, blockquote, br, caption, cite, class, code, col, del , podrobnosti, dd, div, dl, dt, em, obrázek, popis obrázku, zápatí, písmo, h1, h2, h3, h4, h5, h6, záhlaví, hgroup, hr, i, img, ins, kbd, li, mapa , ol, p, pre, q, s, sekce, malý, rozpětí, úder, silný, sub, souhrn, sup, stůl, tbody, td, tfoot, th, thead, tr, tt, u, ul, var.

Pokud se pokusíte zadat nějakou jinou značku, která není zahrnuta v tomto seznamu, editor WordPress ji jednoduše odstraní z příspěvku. také v html editor PHP a JavaScript kód nelze použít. Pokud ještě chcete strčit JavaScript kód abyste se stali, pak musíte samostatný soubor vložte tento kód, poté jej nahrajte na blog a napište do html editoru cestu k otevření tohoto souboru.

To vše zatěžuje trávit tím více času, než si mnoho lidí může dovolit. Mnozí proto hledají, jak nahradit standardní vizuální editor WordPres, který by vyhovoval jejich potřebám a cílům. To je přesně to, o čem budeme dnes mluvit.

Editor se jmenuje TinyMCE Advanced, což dělá fantazii Plugin CKEditor. Neřekl jsem to jen tak, protože do toho bylo strčeno až 15 pluginů: Advanced HR, Advanced Image, Advanced Link, Context Menu, Emotions (Smajlíci), Date and Time, IESpell, Layer, Nonbreaking, Print, Vyhledávání a Vyměnit, Styl, Tabulka, Vizuální znaky a doplňky XHTML.

Toto je zdaleka nejpropracovanější textový editor, který vůbec existuje. Obecně se ukazuje, že plugin je placený, ale z nějakého důvodu je distribuován zcela zdarma. Vývojáři píší, že pro pouhé seznámení jej můžete používat zdarma, ale pro komerční weby musíte zakoupit licenci.

I když si myslím, že tohle je něco jiného. Samotný plugin váží hodně a ne každý potřebuje určité funkce, tlačítka, kterých jsou jen moře, takže plugin si můžete sestavit sami a ponechat jen to, co potřebujete, a tím snížit jeho velikost bez zpomalení blogu.