Заменете example.com с името на вашия домейн и your-theme с вашата папка с теми. Запазете промените си.

Последна стъпка: Използване на CSSза да скриете иконата на менюто за потребители с голям екран и да я покажете за тези с ниска резолюция. Също така трябва да коригираме позицията на иконата на менюто и външния вид на плъзгащия се прозорец. Копирайте и поставете този CSS код в листа със стилове на вашата тема.

@медиен екран и (мин. ширина: 769px) ( #toggle ( display:none; ) ) @медиен екран и (макс. ширина: 768px) ( #popout (позиция: фиксирана; височина: 100%; ширина: 250px; фон : rgb(25, 25, 25); фон: rgba(25, 25, 25, .9); цвят: бял; горе: 0px; ляво: -250px; overflow:auto; ) #toggle ( float: дясно; позиция : фиксиран; отгоре: 60px; отдясно: 45px; ширина: 28px; височина: 24px; ) .nav-menu li ( border-bottom:1px solid #eee; padding:20px; width:100%; ) .nav-menu li :hover (фон:#CCC; ) .nav-меню li a (цвят:#FFF; текст-декорация:няма; ширина:100%; ) )

Имайте предвид, че менютата на вашата тема може да използват различни CSS класове и те може да са в конфликт с тези по-горе. Можете да разрешите този проблем, като използвате инспектора в Chrome или Firefox, за да разберете кои класове са в конфликт с вашите. Освен това не забравяйте, че можете свободно да персонализирате външния вид на панела, за да съответства на дизайна на сайта.

Може би сте забелязали, че повечето разработчици са започнали да добавят специални изтеглящи се панели, базирани на Javascript, към своите уебсайтове, които се поставят или в горната част на сайта, или в долния колонтитул. Тези панели се използват за привличане на вниманието на потребителя към различни промоции, интересни публикации в блогове и т.н. Основната причина тези панели да станат толкова широко разпространени е, разбира се, фокусът върху резултатите. Може да обичате или мразите тези панели, но със сигурност ще се съгласите, че те се справят със задачата. Има много безплатни и търговски добавки за добавяне на плъзгащи се панели към вашия блог; Ще ги разгледам по-късно в тази статия.

Безплатни добавки

здравей бар

Прост и скромен плъгин, който има всичко необходими инструментиза да създадете панел в горната част на сайта. Такъв панел със сигурност ще привлече вниманието на потребителите.

Лента за внимание

Ако трябва да привлечете вниманието на потребителите към някакво важно съобщение, можете да създадете панел за предупреждения, който е обикновен div с допълнителен стил. Въпреки това си струва да запомните, че такъв панел е много досаден и е малко вероятно потребителите на вашия сайт да го харесат. С помощта на плъгина Attention Bar можете да изведете хубава лента в горната част на страницата, която няма да ви разсейва от разглеждането на сайта. Богатите настройки ще помогнат на разработчика да контролира оформлението на панела.

Easy Heads Up Bar

Плъгинът добавя удобна лента за известия в горната част на вашия уебсайт. В известията можете да оставяте връзки, за да подсилите призива за действие.

Лента с инструменти за уведомяване

Панел, поставен в долния колонтитул на вашия блог. Позволява ви да показвате персонализирани известия. Плъгинът е базиран на статичната лента с инструменти.

Лента за бързи известия

Плъгинът ви позволява да създадете подчертано известие в заглавката на сайта. Такова известие със сигурност ще привлече вниманието на потребителите, така че можете да поставите всичко в него, от прости предупреждения до специални оферти.

Бар Viper

Плъгинът ви позволява да добавите панел към заглавната част на сайта, който може да се използва за увеличаване на броя на абонатите. Плъгинът включва вградени стилове, интеграция с Aweber и Feedburner, проследяване на реализациите, разделно тестване и др.

Търговски добавки

Плъгин за WordPress, който ви позволява да добавяте персонализирани панели в горната част на вашия блог или уебсайт. Можете да показвате различни известия за различни страници, задайте стандартен панел, който да се показва на всички страници и др.

Грабване на вниманието

Плъгин, който ви позволява да добавите панел за известия към вашия сайт. С този плъгин можете лесно да показвате персонализиран текст, публикации в Twitter или RSS емисии. Освен това има огромен списък от функции, които ви позволяват да персонализирате външния вид на известието.

http://wplift.com/wordpress-notification-bar-plugins/

Здравейте, скъпи читатели на сайта на блога. Днес искам да говоря за доста функционален и удобен плъгин upPrev, който може да реализира няколко вида свързване на страници наведнъж. Можете да наблюдавате работата му (поне в момента на писане на тази статия) в долната част на всяка страница със статия - вдясно се появява изскачащ панел със списък с подобни материали.

Плъгинът може да показва не само подобни материали, но и предишни статии от същата категория или архив на тагове (това е този, за който говорихме подробно в горната статия и чиято практическа реализация описах), предишни материали в формат на целия блог, както и публикации, взети на случаен принцип. В допълнение, всичко може да бъде овкусено с миниатюри, ако ги създавате, когато пишете публикации.

Каква роля играе връзката сега в промоцията на уебсайта?

Като цяло оптимизацията на сайта, за по-нататъшното му успешно популяризиране, е задача номер едно (номер две е получаването обратни връзки). Вътрешните фактори могат да блокират и намалят влиянието на всичко останало. От друга страна е невъзможно (особено с ключови думив съдържанието и котвите на вътрешните връзки).

Сега интегрираният подход към промоцията е движещ, а свързването заема доста важно място в него. Напоследък стана модерно да се използват инфографики за визуализиране на всичко. По темата за Seo можете да намерите много подобни блок-схеми, например Seoprofi има статия за това как да рекламирате сайт. За съжаление все още не съм готов да създавам такива шедьоври, но позоваването им ще ми позволи да не наливам много вода.

Коя схема за свързване да изберете? Доста труден въпрос, защото много от предишните добре работещи схеми (всички също прословутият „пръстен“, връзки към методите за внедряване, които дадох малко по-високо) вече не дават онези феноменални резултати, които все още се наблюдаваха преди десетина години . Търсачките също се учат и се опитват да не вземат предвид това, което от тяхна гледна точка е очевидна измама.

Свързването под формата на поредица от пръстени, според теорията на Peydrank, трябва сериозно да увеличи статичното тегло на страниците на сайта (), които са включени в този пръстен.

Това обаче не винаги работи на практика. Възможно е, когато отделни страници изпаднат от индекса, пръстенът да се счупи или е възможно, за да намали надценките, търсенето да е въвело сериозен редукционен фактор в класическата формула за изчисляване на статистическото тегло.

Свързването на страниците на сайта има друга задача, която вече не е насочена към това да угоди на Yandex или Google, а към моля посетителя. Една статия, за да опита блога ви, очевидно няма да е достатъчна - определено трябва да го поканите да отиде някъде другаде, за да го заинтересувате, забавите и евентуално да го направите свой абонат.

По този начин свързването също влияе поведенчески фактори , което търсенето също взема предвид и всяка година във все по-голяма степен. Почти всички уеб администратори разбират това и добавят блокове към сайта с подобни материали, с най-четените публикации или със статии от същата категория. Вероятно има и други вариации по темата.

Естествено, възможностите за изпълнение вътрешно свързванеима и маса. Можете дори да правите без плъгини (пример можете да намерите в статията), но много от тях са написани за свързване. Най-трудното нещо е да изберете опция, която работи перфектно на вашия блог.

Самият аз опитах много от тях и дори написах рецензии за някои от тях (). Всъщност споменатият плъгин е един от най-добрите за изчисляване на свързани публикации и изброяването им на страници на блогове.

Но неговите данни могат да използват и други разширения на WordPress, което ги прави по-цветни или претенциозни. В същата статия за YARP току-що дадох пример за използване на неговите данни от приставката за плъзгач на свързани публикации, което позволи показването на подобни публикации под формата на този формуляр:

Е, или така:

Нашият герой днес се обади upPrevсъщо така знае как да вземе информация от базата данни на Yet Another Related Posts Plugin и го прави правилно, защото няма нужда да преоткрива колелото всеки път. Нека всъщност да преминем към описанието на възможностите на това чудо на инженерството.

Опции за свързване с плъгина upPrev

Не съм се докосвал до тези стилове, защото тръгнах по другия път (не най-директния), който ще опиша по-долу в текста. За SIM отидете на втория раздел:

Изберете броя публикации, към които този плъгин ще генерира връзки. Но малко по-ниско, ние просто изберете вида на връзката за нашия сайт. Имам избрана опция за свързани публикации с помощта на базата на приставката Yet Another Related Posts Plugin (тя трябва да бъде предварително инсталирана), но можете да настроите пръстеновидна връзка, като изберете втората или третата опция, както и голяма пръстеновидна връзка, като изберете първо .

Възнамерявах да организирам този бизнес само за публикации, което е отбелязано с отметка в съответното поле. В допълнение към заглавието на публикацията, този панел може да показва и няколко думи (номерът им е зададен най-долу) от началото на публикацията или зоната за цитати, ако я попълните. Стори ми се излишно.

Третият раздел се използва за настройка на проследяване на броя кликвания върху връзки в този панел, който не съм използвал. В четвъртия раздел обаче все пак активирах кеша. На петия раздел предотвратих показването на панела на мобилни телефони, но не възразих срещу напускането му на таблети:

Е, това е всичко, настройките на upPrev приключиха, но вече промених външния вид на панела в настройките на плъгина Yet Another Related Posts.

Персонализиране на външния вид на съдържанието на слайдаута

Там избрах файл с шаблон, който ще отговаря за показването на подобни публикации (вижте връзката по-горе за същността и спецификата на работата с това разширение):

Че. сега външният вид на списъка с подобни публикации, показван от плъгина upPrev (в плъзгащия се панел), се контролира от кода, който е регистриран в моя файл yarpp-template-list.php от моята папка с теми (). Ако вашият блог генерира миниатюри за публикации, тогава има смисъл да изберете шаблон от арсенала на Yet Another Related Posts Plugin с тяхната поддръжка.

Кодът за този файл е:

have_posts()): $postsArray = array(); докато ($related_query->have_posts()) : $related_query->the_post(); $postsArray = "
• ".get_the_title()."
"; endwhile; echo implode(" "."\n",$postsArray); // отпечатване на списък със свързаните елементи, разделени със запетаи else:?>

Няма свързани публикации.

Както можете да видите, това е мястото, където се намира заглавката на изходящия панел, така че ще трябва да конвертирате (ако е необходимо) този файл в UTF-8 кодиране без BOM, за да избегнете грешки (). Не знам за вас, но аз живея доста дълго време като основен Редактор на Notepad++ () и в него тази трансформация се извършва по следния начин:

Ясно е, че този код формира само банален html списък(), и свойствата на CSS, посочени във файла със стилове за класовете в кода, са отговорни за външния вид. В моя случай тези стилове изглеждат така:

A.oy (цвят: #333;font:700 1.2em/1 "PT Sans Narrow", Arial, sans-serif;line-height:18px;) li.eto (text-align:center;padding:12px 5px 17px 5px;margin: 5px 0;border: dotted 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; цвят: #666;)

Класът lampochka добавя зелени отметки, които css кодса зададени за мен с помощта на код base64 (копирах този код някъде). Ако се интересувате, разгледайте моя style.css. Добре, всичко свърши. Ако сте забравили нещо, питайте. Вярно, настроих тази опция за свързване преди месец и през това време нещо вече изчезна от главата ми.

Късмет! Ще се видим скоро на сайта на страниците на блога

Може да се интересувате

Как да премахнете прозрачния пиксел http://yarpp.org/pixels в плъгина Yet Another Related Posts и да промените надписа
Създаване на списък със свързани публикации в WordPress (с миниатюри) Използване на приставката за свързани публикации за вътрешно свързване
Как да подобрите статистиката за поведението на уебсайта с още една свързана публикация и Плъгини за плъзгач на свързана публикация за WordPress
Прости броячи и икони за категории и страници - красиви броячи за RSS и Twitter, както и икони за категории и страници в WordPress
Приставки за WordPress в моя блог (уебсайт) Плъзгачи и слайдшоу за вашия сайт - какви опции има и как да използвате jQuery Slider скриптове
Breadcrumbs в WordPress с помощта на плъгина Breadcrumb NavXT (укрепване на свързването)
Намаляване на потреблението на памет в WordPress при създаване на страници - WPLANG Lite плъгин за заместване на файла за локализация
WP-PageNavi - Навигация на страници за WordPress блог - Инсталиране, конфигуриране и модификация външен видпагинация
Календаризирайте го! - Календар на събитията за WordPress
Не изпраща поща от WordPress и не работи визуален редактор- решение с плъгини Configure SMTP и Post Editor Buttons

как навигационно менюпо сайт, меню на потребителския профили т.н. можете да скриете и те ще се появят, когато щракнете и задържите курсора на мишката. Някои може да кажат, че използваемостта на страницата страда от това. Не мисля така, тъй като страницата става по-чиста, което означава, че е по-лесна за навигация. Човек не се бърка в планината от връзки.
Днес направих колекция плъзгащи се панели, които по подразбиране са скрити на страницата. Да се ​​обади меню, трябва да щракнете или да задържите курсора на мишката върху съответната икона. Тази техника дойде в уеб дизайна от мобилни приложения, където не можете да маркирате много елементи на един екран. С течение на времето такива панели мигрираха към уебсайтове. Тази колекция ще бъде полезна преди всичко за мобилни разработчици, . При малка резолюция на екрана това ще се появи изходяща навигация, а на нормални, големи монитори можете да направите обикновено меню, с което всеки е свикнал. Така човек с мобилно устройство няма да се обърка във вашия сайт, тъй като отдавна е свикнал да използва плъзгащи се панели, защото всички приложения в смартфона му работят на същия принцип.
Искам да отбележа, че тази колекция включва добавки, които се заточват само под мобилни сайтовеи на широки монитори използването им ще бъде неподходящо. Въпреки че има универсални панели, които са подходящи за всеки уебсайт. Вижте демонстрацията и изберете това, което отговаря на вашите нужди.
Падащите панели работят на . Внедряването на такова меню във вашия сайт няма да е трудно, а сайтовете на разработчиците имат подробни инструкциипри използването на техния продукт.
Скоро планираме да преработим уебсайта Postovoy и ще използваме един от jquery добавкикоито са представени по-долу.
Така. Ето колекция от 20 плъгина за падаща плъзгаща се лента на jqueryза вашия сайт. Не забравяйте да оставите коментари.

Плъзгащо се странично меню

Хубаво плъзгащо се навигационно меню в jquery. Идеален както за мобилни, така и за обикновени сайтове.

Преходи за навигации извън платното

Изключително мощен плъгин, който ви позволява да организирате слайд панел, който ще бъде показан с различни анимационни ефекти, включително 3D. Плъгинът включва 14 анимационни ефекта.

jPanelMenu

Навигационната лента е направена в стила Приложения за iOS. Леко и бързо меню, което ще улесни изработката на мобилен сайт.

Пресъздайте Google NexusМеню

Плъзгащият се панел е направен по аналогия с менюто на Google Nexus.

bigSlide - Jquery слайд навигационна лента

Слайд панелът е подходящ както за мобилен сайт, така и за обикновен. За да го извикате, трябва да кликнете върху иконата, изобразяваща три ивици.

Многостепенно меню за натискане

Приставката Jqutry работи подобно на bigSlide. Панелът се извиква, когато щракнете върху иконата. Предимството на това меню е, че поддържа многостепенна структура.

Меню на капака на кутията

Много красива слайд навигационна лента с 3D ефект.

Анимирани менюта с граници

Като щракнете върху знака плюс в ъгъла на екрана, малко страничен панелс икони. За да го скриете, трябва да кликнете върху иконата със символа "-".

Snap.js

Плъзгащият панел е предназначен за мобилни устройства. Менюто се извиква чрез плъзгане на екрана с курсора на мишката или, ако е включено мобилно устройство, пръст на ръката.

Менюта за плъзгане и натискане

|

Меню

Приставката Jquery ви позволява да внедрите страхотна лента за навигация в слайдове с 3D ефект на вашия сайт.

mb.jquery

За разлика от други панели, той се появява в горната част на екрана, вместо да го мести. В блока можете да поставите всеки html, текст и изобщо всичко, което искате.

Android Dock

Панелът е заострен за мобилни сайтове и се намира в долната част на екрана. При натискане се появяват икони, в които можете да поставите всякакви връзки.

Лента за плъзгане на съдържанието

Cool слайд панел е направен под формата на две нива. Първото е менюто. Второто е съдържанието. Сега този ефект е много популярен сред дизайнерите и уеб разработчиците. Можете да намерите много приложения. Мейлърът на Microsoft работи на подобен принцип.

Със сигурност често сте срещали на страниците на сайтове прибиращи се панели различен види подредби, които казват отгоре, отдолу, отдясно или отляво напълно автоматично, с определен интервал от време или се активират чрез щракване. Като правило, в такива панели, скрити от очите на потребителя за момента, някои Допълнителна информацияважно и не толкова важно. Например формуляри за абонамент, уиджети за социални медии, връзки, тагове, данни за контакт и т.н., накратко, всичко.
Съществува голяма сумаготови решения за внедряване на плъзгащи се панели в javascript, модули и плъгини за различни CMS, отделни jQuery добавки, но доста, хванаха окото ми, напълно работещи начини чист CSS.

От дълго време исках да раздвижа нещо подобно, механизмът за използване на скрити квадратчета за отметка е добре известен и разбираем, но някак си ръцете ми не стигнаха до него. И така, след като се натъкнах на един в прашните складове на CodePen, реших да експериментирам и да го дам на планината, доста работещ, леко модифициран и адаптиран за нашия брат, моята версия на прибиращия се горен панелна чист CSS се оказа какво се е случило)).

Разгледахме примера, сравнихме го с оригинала и сега, който има нужда от него, нека да разгледаме как работи всичко заедно. Още веднъж, без js, само чист html и "магически" css ще свършат работа.

Html оформление

Състои се от три основни елемента: основен контейнер, блок със съдържание и бутон за отваряне/затваряне на панела.

Както можете да видите, флагът type=" " присъства в дизайна на панела, който е скрит и неактивен по подразбиране. С етикет , който е проектиран като бутон в css, установяваме връзка между квадратчето за отметка, т.е. ако щракнете върху етикета, въвеждането ще работи (стана активно). Е, с помощта на псевдо-клас: в css установяваме връзка между скритата отметка и елементите на панела.
Искам веднага да отбележа, че бутонът за отваряне / затваряне не е прикрепен към тялото на панела, а е разположен спрямо контейнера за съдържание на главната страница