Създаване на wordpress сайт 3 (меню)

Безплатни 20 урока
регистрирай се и научи

Ако сте вече потребител - Регистриран съм
Видео
В този урок ще заменим менюто, което имаме тук с динамично меню, което се контролира от "wordpress".
Тоест от този контролен панел.
Би трябвало да излезне "sample page" и "test page".
Затова ще отида в "notepad", там, където се намират мeнютата ми.
И ще напиша този ред.
"php wp_nav menu", тоест това взима менютата от "wordpress".
Като другите ги коментирам.
Това са стаите менюта.
Ще се върна тук и ще дам "refresh".
Сега излизат правите менюта.
Но, те не са стилизирани по нашият начин.
Ще мина с "space" върху тях.
За да видя, какъв е пътя им.
Забележете, "wordpress" е добавил ul, li, page-item-2 И най-накрая А.
На нас ни трябва само това.
Затова ще добавим едно правило, което ще премахне всякакъв ефект от тези "UL" или това ще го направя по този начин.
Натискам "menu", "make rule" и тук ще сложа всички "UL" в меню и всички "LI" в меню.
Първото нещо ще направя е да натисна тези бутони, за да зануля "margin" и "pading" След което, искам да ми излизат на един ред, затова ще сложа "display" - "inline" Принципно "list style", тези булети отстрани изчезнаха.
Но не съм сигурен дали на всички браузъри ще изчезнат, затова ще сложа "list style", "none".
Tрябва да го "expand" първо.
Тип и от тук "none".
Сега вече нямат никакъв ефект.
Но все пак менютата ми не са копирани.
Това е защото в HTML те искат да имат клас "меню link", за да работят и да се стилизирани по този начин.
Това, което може да направим е да намерим тези меню линк правила и да ги преименуваме.
Искам всъщност всички линкове, които са в меню ID Това е ID.
да имат този стил.
Като в момента няма да работи "overeffect", затова ще го направя тук "меню - а - hover" избирам save менютата са готови.
Сега ако отида в "wordpress" и създам нова страница би трябвало да излезе тук Сега, тези менюта в момента са е много странно подредени.
Сигурно ще искате да ги преподредите.
Това неможе да го направим от тук Ще трябва да отидем в "appearance", менюта Tози контролен панел е специално направено, за изграждането на менюта.
Наименоваме нашето меню "main" и избираме "create menu".
След което, от тук може да изберем страниците, които искаме да са в това мено.
Например искам само тези двете.
И искам "test page" да е отгоре, затова го влача просто и давам "Save".
Сега когато дойда тук и дам "refresh" ще се покажат само тези две менюта.
Нека да добавим и третото.
Save.
По този начин мога да преподреждам менютата, много бързо и лесно.
Както и в много случаи, ще имате страници, които не искат да излизат в менюто.
Сега другото нещо, което мога да направя е да направя ново меню, с този бутон тук.
Менюто ще се казва "side" меню.
Създавам го.
И в него ще сложа само "test page" и "sample page".
Kато "test page" e отгоре.
Окей, избирам "Save".
Връщам се към кода.
Копирам кода за менюто и ще го поставя в моя "sidebar" Като тук ще сложа първо един div ID, sidemenu.
Сега, трябва да добавя този код вътре, вие може да го видите от файла, който съм прикачил.
С него избирам, кое от двете менюта, които направих, да се показва.
"menu=test" Всъщност съм го кръстил "side" Затова тук ще сложа "side".
Запазвам.
Сега, когато дам "refresh" Тук ще ми излезе още едно меню.
Него също мога да го стилизирам.
Тук излязиха доста странни неща.
"LI"с хиляди класове.
Нека да се опитаме да го направим.
Меню, не виждам линка, не съм го избрал.
"sidemenu" "make rule", фон Ще му сложа този път "display - block" За да стига до краищата.
Като "sidemenu" ul in side menu или ще ги скрия тези "LI" Простo ще премахна ефекта въобще.
Сега вече оттук мога да задам "heigh" на тези "A" и "margin", за да ги отделя.
И да стават повече като менюта.
Това не се вижда в момента.
text-decoration none, за да няма "Thunder line".
Ще сложи и малко "padding".
ляво и line-height 20 пиксела.
След което ще го преместя.
Сега вече имаме две менюта.
Oтгоре и отдясно.
Давам "save".
Принципно, ако се интересуват повече от това, как може да управлявате тази функция, за поставяне на менюта.
Може да отидете в Google и ще намерите на първо място този "reference", който ви дава хиляди опции за използването на това меню.
Най-вероятно,в повечето случаи ще ви трябват само тези.
Като избирате, кое меню искате да излезе тук.
И ако не сложите параметър с това, кое меню искате да излезе, ще ви избере първото меню, от контрол панела.

Въпроси и отговори

  • Ангел Арънски:

    Трябва ми повече информация. Натисни CTRL+SHIFT+J докато си вътре в Chrome и на страницата с грешка. Ще се покаже нещо подобно на screenshot-а ми. Натисни F5 за обновяване на страницата и би трябвало да се покажат разни грешки, направи им един screenshot и го пусни тук

    инж. Юлия Петрова Савова:

    Пише, че липсват файловете с картинките, но те са на сървъра. Кой wiedth е невалиден и кои кавички трябва да коригирам?  Проблемът се получи, когато разделих файла на 3 части:  header.php, footer.php i index.php.

  • Защо се получи това?

    Васил:

    При преименуването на правилото .menulink на #menu, се получаваше така, че всички менюта в страницата приемаха това правило и всичко се изкривяваше. Отстраних проблема като го преименувах на #menu-menu-one A

    Milen Grigorov:

    Защото по този начин се сменя целевия елемент върху който е приложен класа. Когато смениш класа сменяш и столовете който го съпътстват.