Plovoucí prvky, bloky pro obrazovku při posouvání, mají obvykle vyšší míru prokliku a konverze než statické objekty. To je důvod, proč mnoho webových stránek používá na svých stránkách plovoucí prvky. Viděli jsme prvky jako záhlaví, zápatí, widget postranního panelu newsletteru atd. V minulosti jsme vám ukázali, . V tomto článku vám ukážeme, jak ve WordPressu vytvořit lepivý plovoucí postranní panel widgetů, abyste mohli svůj e-mailový zpravodaj vyniknout.
Poznámka: Toto funguje pro všechny typy widgetů postranního panelu, nejen pro váš e-mail. Můžete jej použít pro propagace, doporučené příspěvky, fotografie Flickr, kalendář Google a v podstatě cokoli jiného, co se vám líbí.
První věc, kterou musíte udělat, je nainstalovat a aktivovat plugin Q2W3 Fixed Widget. Po aktivaci pluginu přejděte na vzhled » widgety a klikněte na widget, který chcete nalepit. Plugin přidává možnost pevnýwidget do všech vašich widgetů. Zkontrolujte okno pevnýwidget a uložte změny. Přejděte na svůj osobní web a přejděte dolů. Váš pevnýwidget bude nyní lepivým plovoucím widgetem. 
Zapojit pevnýwidget přichází s možnostmi přizpůsobení umístění hlavních widgetů. Jít do Zobrazit » možnosti pevnýwidget pro konfiguraci pluginu. Na této stránce můžete nastavit pole, přidat vlastní HTML ID a dokonce zakázat pevné widgety na telefonech a tabletech.
Lepivý plovoucí postranní panel lze použít ke zvýšení celkové loajality uživatelů. Na postranním panelu můžete mít několik pevných widgetů. Mohou však být snadno podrážděny a to může mít také negativní dopad. Udržujte ve svém návrhu rovnováhu, abyste uživatele nedráždili.
Dobrý den, milí čtenáři tohoto blogu. Dnes chci mluvit o docela funkčním a pohodlném upPrev pluginu, který dokáže implementovat několik typů propojení stránek najednou. Jeho práci (alespoň v době psaní tohoto článku) můžete pozorovat ve spodní části každé stránky článku – vpravo se objeví vyskakovací panel se seznamem podobných materiálů.
Plugin dokáže zobrazit nejen podobné materiály, ale i předchozí články ze stejné kategorie nebo archivu tagů (o tom jsme podrobně hovořili ve výše uvedeném článku a jehož praktickou implementaci jsem popsal), předchozí materiály v formátu celého blogu i náhodně pořízených publikací. Celé to lze navíc okořenit náhledy, pokud si je vytvoříte při psaní příspěvků.
Jakou roli nyní hraje propojení v propagaci webu?
Obecně je optimalizace webu pro jeho další úspěšnou propagaci úkolem číslo jedna (číslo dvě je získávání zpětných odkazů). Vnitřní faktory mohou blokovat a snižovat vliv všeho ostatního. Na druhou stranu to není možné (zejména u klíčových slov v obsahu a ukotvení interních odkazů).
V dnešní době má na starosti integrovaný přístup k propagaci a propojování v něm zaujímá poměrně významné místo. V poslední době se stalo módou používat infografiku k vizuálnímu znázornění čehokoli. Na téma SEO můžete najít mnoho podobných vývojových diagramů, například v článku Seopro o tom, jak propagovat web. Bohužel ještě nejsem připraven tvořit taková mistrovská díla, ale odkazování na ně mi umožní nevylévat zbytečnou vodu.
Jaké schéma propojení zvolit? Docela obtížná otázka, protože mnoho schémat, která dříve dobře fungovala (všechny ten samý notoricky známý „prsten“, odkazy na způsoby implementace, které jsem uvedl výše), již neposkytují fenomenální výsledky, které byly pozorovány před deseti lety. Vyhledávače se také učí a snaží se nebrat v úvahu to, co je z jejich pohledu evidentní podvádění.
Propojení ve formě řady prstenců by podle Peydrankovy teorie mělo vážně zvýšit statickou váhu stránek webu (), které jsou v tomto prstenci zapojeny.
Ne vždy to však v praxi funguje. Je možné, že když jednotlivé stránky vypadnou z rejstříku, prstenec praskne, nebo je možné, že za účelem snížení přirážek zavedlo vyhledávání do klasického vzorce pro výpočet váhy stavu závažný redukční faktor.
Propojení webových stránek má další úkol, který již není zaměřen na potěšení Yandex nebo Google, ale na se bude návštěvníkovi líbit. Jeden článek mu na vyzkoušení vašeho blogu zjevně stačit nebude – rozhodně ho musíte pozvat někam jinam, abyste ho zaujali, udrželi si ho a případně si z něj udělali odběratele.
Propojení tedy také ovlivňuje behaviorální faktory, na což vyhledávání také počítá a každým rokem ve větší a větší míře. Téměř všichni webmasteři to chápou a přidávají na stránky bloky s podobnými materiály, s nejčtenějšími publikacemi nebo s články ze stejné kategorie. Pravděpodobně existují další variace na téma.
Samozřejmě existuje také mnoho možností pro implementaci interního propojení. Dokonce se obejdete i bez pluginů (příklad můžete vidět v článku), ale spousta jich byla napsána pro linkování. Nejtěžší je vybrat si možnost, která bude pro váš blog dokonale fungovat.
Sám jsem jich vyzkoušel spoustu a na některé z nich dokonce napsal recenze (). Ve skutečnosti je zmíněný plugin jeden z nejlepších pro výpočet souvisejících příspěvků a jejich výpis na stránkách blogu.
Jeho data však mohou využívat i jiná rozšíření WordPressu, která je navrhují barevněji nebo okázale. Ve stejném článku o YARP jsem právě uvedl příklad toho, jak jeho data používal plugin Related Posts Slider, který mu umožňoval zobrazovat podobné příspěvky v následující podobě:
No, nebo toto:
Volal náš dnešní hrdina nahoruPřed také ví, jak přebírat informace z databáze pluginů Yet Another Related Posts a dělá správnou věc, protože není potřeba pokaždé znovu vynalézat kolo. Přejděme ve skutečnosti k popisu schopností tohoto zázraku inženýrství.
Možnosti propojení pomocí pluginu upPrev
Na tyto styly jsem nesáhl, protože jsem se vydal jinou cestou (ne nejpřímější), kterou popíšu níže v textu. Poté přejděte na druhou kartu:
Vyberte počet příspěvků, na které bude tento plugin generovat odkazy. Ale o něco níže jsme akorát vyberte typ odkazu pro naše stránky. Vybral jsem možnost podobných příspěvků pomocí základny Plugin Yet Another Related Posts (musí být předinstalovaný), ale můžete nakonfigurovat propojení typu ring výběrem druhé nebo třetí možnosti, stejně jako propojení velkých kruhů výběrem možnosti První .
Měl jsem v úmyslu uspořádat tuto záležitost pouze pro příspěvky, což je označeno zaškrtnutím v příslušném poli. Kromě názvu příspěvku může tento panel zobrazit také několik slov (jejich počet je nastaven úplně dole) od začátku příspěvku nebo oblasti citátu, pokud jej vyplníte. Přišlo mi to zbytečné.
Třetí záložka slouží k nastavení sledování počtu kliknutí na odkazy v tomto panelu, které jsem nevyužil. Nicméně na čtvrté záložce jsem ještě aktivoval cache. Na páté záložce jsem zakázal zobrazování panelu na mobilních telefonech, ale nenamítal jsem jeho zobrazování na tabletech:
No, to je vše, upPrev dokončil nastavení, ale vzhled panelu jsem již změnil v nastavení pluginu Yet Another Related Posts.
Přizpůsobení vzhledu obsahu posuvného panelu
Tam jsem vybral soubor šablony, který bude zodpovědný za zobrazování podobných příspěvků (podstatu a specifika práce s tímto rozšířením naleznete v odkazu výše):
Že. Nyní je vzhled seznamu podobných příspěvků zobrazený pluginem upPrev (ve vyskakovacím panelu) určen kódem, který je zapsán v mém souboru yarpp-template-list.php ze složky s mým tématem (). Pokud váš blog generuje miniatury pro příspěvky, pak má smysl vybrat si šablonu z arzenálu pluginů Yet Another Related Posts s jejich podporou.
Kód pro tento soubor je:
-
have_posts()): $postsArray = array(); while ($related_query->have_posts()) : $related_query->the_post(); $postsArray = "
- ".get_the_title()." "; endwhile; echo implode(" "."\n",$postsArray); // vytiskne seznam souvisejících položek oddělených čárkami else:?>
Žádné související příspěvky.
Jak vidíte, zde žije hlavička posuvného soketu, takže budete muset (v případě potřeby) tento soubor převést do kódování UTF-8 bez kusovníku, abyste se vyhnuli crack(). Nevím jak vy, ale já mám Notepad++ () jako svůj hlavní editor už docela dlouho a v něm se tato konverze provádí takto:
Je jasné, že tento kód generuje pouze banální Html seznam () a za vzhled jsou zodpovědné vlastnosti CSS zapsané v souboru stylu pro třídy přítomné v kódu. V mém případě tyto styly vypadají takto:
A.oy (color: #333;font:700 1.2em/1 "PT Sans Narrow", Arial, bezpatkové;line-height:18px;) li.eto (text-align:center;padding:12px 5px 17px 5px;margin: 5px 0;border: tečkovaný 2px #ccc;) li.eto:hover (text-decoration:underline;) div.oyy (margin:0 0 0 0;padding:5px 0;font:normal 17px "Trebuchet MS", Verdana, Arial;barva:#666;)
Třída lampochka přidává zelené zaškrtávací značky, které jsou nastaveny v mém kódu CSS pomocí kódu base64 (tento kód jsem někde zkopíroval). Pokud máte zájem, mrkněte na můj styl.css. Dobře, teď je po všem. Pokud jste na něco zapomněli, zeptejte se. Je pravda, že jsem tuto možnost propojení nastavil před měsícem a během této doby mi již něco zmizelo z mysli.
Hodně štěstí! Brzy se uvidíme na stránkách blogu
Mohlo by vás to zajímat
Jak odstranit průhledný pixel http://yarpp.org/pixels v pluginu Yet Another Related Posts a změnit nápis Podobné materiály 
Vytvoření seznamu souvisejících příspěvků ve WordPressu (s miniaturami) pomocí pluginu Related Posts pro interní propojení 
Jak zlepšit statistiky chování webových stránek pomocí pluginů Ještě další související příspěvky a Posuvník souvisejících příspěvků pro WordPress 
Jednoduché počítadla a ikony kategorií a stránek – krásné počítadla RSS a Twitter, stejně jako ikony kategorií a stránek ve WordPressu 
WordPress pluginy na mém blogu (stránce) Posuvníky a prezentace pro váš web – jaké možnosti existují a jak používat skripty jQuery Slider 
Drobečková navigace ve WordPressu pomocí pluginu Breadcrumb NavXT (posílení propojení) 
Snížení spotřeby paměti ve WordPressu při vytváření stránek - plugin WPLANG Lite pro nahrazení lokalizačního souboru 
WP-PageNavi - navigace po stránkách pro blog WordPress - instalace, konfigurace a změna vzhledu stránkování 
Kalendářujte to! - Kalendář akcí pro WordPress 
Mail se z WordPressu neodesílá a vizuální editor nefunguje – řešení pomocí pluginů Configure SMTP a Post Editor Buttons
Nedávno se jeden z našich čtenářů zeptal, jak nahradit jeho nabídku navigace na webu vyskakovacím pruhem nabídky jQuery. Takový panel může výrazně zlepšit použitelnost na mobilních verzích stránek. V tomto článku vám ukážeme, jak přidat posuvný panel nabídek k tématům WordPress.
Poznámka: Tento článek předpokládá středně pokročilé znalosti HTML a CSS.
Nahrazení standardní nabídky posuvným panelem ve WordPressu
Cílem je zde zobrazit posuvnou lištu nabídek uživatelům s nízkým rozlišením obrazovky při zachování standardní nabídky našeho motivu, aby uživatelé stolních počítačů viděli plnou verzi nabídky. Než začneme, je důležité pochopit, že existuje mnoho různých témat WordPress, takže budete muset upravit styly CSS v závislosti na vašem návrhu.
Nejprve musíme otevřít textový editor, jako je Poznámkový blok, a vytvořit nový soubor. Zkopírujte a vložte do něj následující kód:
(funkce($) ( $("#přepnout").toggle(funkce() ( $("#popout").animate(( vlevo: 0), "pomalu", function() ( $("#přepnout" .html(" 
"); )); ), function() ( $("#popout").animate(( vlevo: -250), "pomaly", function() ( $("#toggle").html(" "); )); )); )) (jQuery);
Nahradit example.com na název domény vašeho webu a také změnit vaše téma do aktuální složky aktuálního motivu. Uložte soubor s názvem slidepanel.js na počítači. Tento kód používá jQuery k přepínání posuvného panelu nabídek. Také oživuje spínací efekt.
Otevřete svého FTP klienta (Filezilla nebo Total Commander) a připojte se ke svému webu. Dále přejděte do adresáře vašeho motivu a pokud v něm již nějaká složka je js, pak jej otevřete. Pokud váš motiv takový adresář nemá, vytvořte jej a nahrajte do něj soubor slidepanel.js.
Dalším krokem je navrhnout nebo najít ikonu pro nabídku. Nejpoužívanější ikonou je ta se třemi pruhy. Můžete jej vytvořit v libovolném grafickém editoru (například Photoshop) nebo najít některý z mnoha existujících na Googlu. V tomto příkladu použijeme pro ikonu velikost 27x23px. Jakmile jej vytvoříte, přejmenujte jej na menu.png a nahrajte jej do složky obrázků v adresáři motivu.
Dalším krokem je posuvný panel nabídek. Stačí zkopírovat a vložit následující kód do souboru funkce.php témata:
Wp_enqueue_script("wpb_slidepanel", get_template_directory_uri() . "/js/slidepanel.js", array("jquery"), "20131010", true);
Nyní, když jsou všechny přípravné práce dokončeny, je třeba upravit výchozí nabídku motivu. Většina motivů obvykle zobrazuje v souboru navigační nabídku hlavička.php Témata. Otevírací hlavička.php a najděte řádek podobný tomuto:
"primary", "menu_class" => "nav-menu")); ?>
Úkolem je zabalit nabídku motivu do kódu HTML, aby se posuvná lišta nabídek zobrazila na malých obrazovkách. Zabalíme to
Nahraďte example.com názvem vaší domény a vaše téma vaší složkou motivu. Uložte změny.
Posledním krokem je použití CSS ke skrytí ikony nabídky pro uživatele s velkými obrazovkami a její zobrazení pro uživatele s malými obrazovkami. Dále musíme upravit polohu ikony nabídky a vzhled posuvného panelu. Zkopírujte a vložte tento kód CSS do šablony stylů vašeho motivu.
@media screen and (min-width: 769px) ( #toggle ( display:none; ) ) @media screen and (max-width: 768px) ( #popout ( position: fixed; height: 100%; width: 250px; background : rgb(25, 25, 25); pozadí: rgba(25, 25, 25, .9); barva: bílá; nahoře: 0px; vlevo: -250px; přetečení:auto; ) #toggle ( float: right; position : pevné; nahoře: 60px; vpravo: 45px; šířka: 28px; výška: 24px; ) .nav-menu li ( border-bottom:1px solid #eee; padding:20px; width:100%; ) .nav-menu li :hover ( background:#CCC; ) .nav-menu li a ( color:#FFF; text-decoration:none; width:100%; ) )
Mějte na paměti, že nabídka vašeho motivu může používat různé třídy CSS a ty mohou být v rozporu s výše uvedenými. Tento problém můžete vyřešit pomocí Inspektoru v Chrome nebo Firefoxu, abyste zjistili, které třídy jsou v konfliktu s vašimi. Nezapomeňte také, že si můžete upravit vzhled panelu tak, aby vyhovoval designu webu.
Pravděpodobně jste si všimli, že většina vývojářů začala na své webové stránky přidávat speciální vysouvací panely založené na Javascriptu, které jsou umístěny buď úplně nahoře na webu, nebo v patičce. Tyto panely slouží k upoutání pozornosti uživatelů na různé propagační akce, zajímavé blogové příspěvky atd. Hlavním důvodem, proč se tyto panely tak rozšířily, je samozřejmě jejich zaměření na výsledky. Tyto panely můžete milovat nebo nenávidět, ale určitě budete souhlasit s tím, že svou práci odvedou. Existuje mnoho bezplatných a komerčních pluginů pro přidávání vyskakovacích panelů do vašeho blogu; Podívám se na ně později v tomto článku.
Bezplatné pluginy
Ahoj Baru
Jednoduchý a skromný plugin, který má všechny potřebné nástroje k vytvoření panelu v horní části webu. Takový panel rozhodně upoutá pozornost uživatele.
Pozor Bar
Pokud potřebujete upozornit uživatele na nějakou důležitou zprávu, můžete vytvořit varovnou lištu, která je běžný div s dodatečným stylem. Je však třeba si uvědomit, že takový panel je velmi nepříjemný a uživatelům vašeho webu se pravděpodobně nebude líbit. Pomocí pluginu Attention Bar můžete v horní části stránky zobrazit dobrou lištu, která nebude odvádět pozornost od prohlížení webu. Bohatá nastavení pomohou vývojářům ovládat rozložení panelu.
Snadný Heads Up Bar
Plugin přidá praktickou oznamovací lištu do horní části vašeho webu. V oznámeních můžete zanechat odkazy, abyste vylepšili výzvu k akci.
Panel nástrojů oznámení
Panel umístěný v patičce vašeho blogu. Umožňuje zobrazit vlastní oznámení. Plugin je založen na statické liště nástrojů.
Panel rychlého upozornění
Plugin umožňuje vytvořit zvýrazněné upozornění v záhlaví webu. Takové upozornění jistě přitáhne pozornost uživatelů, takže do něj můžete umístit cokoli, od jednoduchých upozornění až po speciální nabídky.
Viper Bar
Plugin umožňuje přidat panel do oblasti záhlaví webu, který lze použít ke zvýšení počtu předplatitelů. Plugin obsahuje vestavěné styly, integraci Aweber a Feedburner, sledování konverzí, rozdělené testování a další.
Komerční pluginy
Plugin WordPress, který vám umožňuje přidávat vlastní panely do horní části vašeho blogu nebo webu. Můžete zobrazovat různá upozornění pro různé stránky, nastavit standardní panel, který se bude zobrazovat na všech stránkách atd.
Pozor Grabber
Plugin, který vám umožní přidat na váš web panel oznámení. Pomocí tohoto pluginu můžete snadno zobrazovat libovolný text, příspěvky na Twitteru nebo RSS kanály. Kromě toho existuje obrovský seznam funkcí, které umožňují přizpůsobit vzhled oznámení.
http://wplift.com/wordpress-notification-bar-plugins/
Oznamovací panely- extrémně účinný prostředek stimulace uživatele k přechodu na požadovanou stránku. Navíc slouží k zobrazení důležitých informací, protože vždy upoutají pozornost uživatele. Některé panely obsahují formuláře pro zadávání dat a lze je použít například k organizaci přihlášení k odběru e-mailových konferencí.
V internetových obchodech se oznamovací panely aktivně používají k informování návštěvníků o akcích a slevách, a jsou tak silným mechanismem pro zvýšení prodeje.
V této recenzi budu mluvit pouze o některých z nejfunkčnějších a nejatraktivnějších pluginů pro vytváření takových panelů na stránkách webu nebo blogu na platformě, podle mého názoru. Každý z nich má své výhody, mnoho funkcí a možnost přizpůsobit vzhled stylu a designu vašeho webu. Nepochybuji o tom, že díky této recenzi si budete moci vybrat plugin, který nejlépe vyhovuje vašim požadavkům.
Vlastní oznámení
Vysoce kvalitní prémiový plugin, který má všechny potřebné funkce obsažené v pluginu této úrovně.Notifikační lišta může obsahovat jednoduchý text, e-mailový vstupní formulář nebo na webových stránkách, sociálních sítích a odpočítávacím časovači.
A to vše je uzavřeno v adaptivních kontejnerech a správně se zobrazí na jakékoli obrazovce. Panel nastavení navíc umožňuje ovládat pozici na stránce a barevné schéma téměř bez omezení.
Cena: 29 dolarů
Plugin BugMeBar WordPress
Jednoduchý, ale poutavý panel s velmi krásnými a poutavými barevnými efekty. Může být umístěn kdekoli na stránce a navíc může nastavovat cookies a nezobrazovat se při následné návštěvě stránky, pokud ji uživatel najednou nechce vidět.Další vlastnosti, které stojí za zmínku:
- Určení stránek, na kterých se panel zobrazí a na kterých ne.
- Nastavení doby platnosti souborů cookie.
- Plná kontrola nad vzhledem, včetně výběru barvy, průhlednosti atd.
- Schopnost posunout pevná záhlaví při zachování integrity rozvržení.
- Schopnost povolit nebo zakázat přechodnost a animaci
Ahoj Baru
Jeden z nejoblíbenějších oznamovací lišty pro Wordpress. A pak, volný, uvolnit, i když z hlediska funkčnosti není v žádném případě horší než jeho prémiové protějšky.Chcete-li použít panel Hello, přejděte do pluginu a zadejte adresu URL svého blogu. Dále se dostanete na panel nastavení, kde můžete nakonfigurovat umístění a vzhled oznámení. Panel nastavení má navíc funkci náhledu, takže můžete svým upozorněním rychle dát požadovaný vzhled.
Po dokončení nastavení obdržíte fragment kódu, který musíte vložit přímo na stránku webu. Pokud se necítíte dostatečně kvalifikovaní pro tuto operaci, můžete si nainstalovat takový, který tuto rutinní práci udělá za vás.
DW Promobar
Poměrně jednoduchý plugin obsahující jen to nejnutnější. Notifikační lišta může zobrazovat jednoduchý text, tlačítko, odkaz nebo odpočítávací měřič. Vypadá atraktivně a dává vám plnou kontrolu nad všemi možnostmi přizpůsobení.
Foobar – oznamovací lišty WordPress
Tato recenze by nebyla úplná, kdybych nezmínil Foobar. Jedná se o jeden z nejpoužívanějších prémiových pluginů v této třídě. Obsahuje přes 30 možností přizpůsobení a na rozdíl od mnoha jiných umožňuje přizpůsobit notifikační lištu pro každou stránku zvlášť.Cena: 9 dolarů
Notifikační lišta WordPressu
Plugin zdarma, snadné použití a aktivace. Obsah panelu může být prostý text nebo může obsahovat také tlačítko spojené s konkrétní akcí. Díky široké škále nastavení barev si panel dokonale přizpůsobíte designu vašeho webu.
Royal Footer Bar
Royal Footer Bar je plugin nejvyšší třídy, skutečně „královský“. Vypadá velmi profesionálně a má širokou škálu možností.Informační panel může obsahovat prostý text, formulář pro přihlášení k odběru e-mailových konferencí a různé odkazy, včetně účtů na sociálních sítích. V panelu nastavení můžete nejen nastavit potřebná nastavení, ale také získat kompletní statistiky o aktivitě.
Vrcholem tohoto pluginu je, že jej vývojáři nazvali A/B/C test – můžete nastavit několik nastavení a po jejich vyhodnocení ve vašem pracovním prostředí vybrat to, které nejlépe odpovídá konceptu webu.
Cena: 39 dolarů
