Как да проектираме уебсайт на Wordpress въз основа на шаблона Twenty Eleven
Как да направите добър дизайн на уебсайт в темата на проекта? Трябва да инсталирате и редактирате готовия шаблон.
В последния урок инсталирахме шаблона Twenty Eleven на сайта и направихме някои настройки. Сега, въз основа на този шаблон, ще направим нов дизайн.
Сайт, базиран на шаблона на Twenty Eleven, изглежда по следния начин...
Напомням ви, че всички изображения могат да се кликват - като щракнете, те се увеличават.
И силно препоръчвам: преди да започнете да редактирате шаблонни файлове, не забравяйте да запазите резервните им копия. Най-лесният начин е просто да копирате съдържанието на файла в текстов документ. След това, ако случайно развалите нещо, можете да се върнете към оригиналната версия.
Как да промените името и описанието на сайта?
Кликнете в менюто "Външен вид" - "Персонализиране". Изберете Свойства на сайта.
В появилия се прозорец напишете името на сайта и неговото кратко описание.
Ако поставите отметка в квадратчето „Показване на текст от заглавката“, тогава тези данни ще се показват в заглавката на сайта над основното изображение.
Ако не отметнете тази опция, веднага ще се появи изображение в най-горната част на страницата, както на този сайт.
Можете също да изтеглите favicon тук. Тази малка картинка 16 на 16 пиксела работи за имиджа на сайта. В резултатите от търсенето на Yandex фавиконата ще се появи до заглавието на вашия сайт и ще може да привлече вниманието на пътниците, които се скитат в Интернет. В браузъра на потребителя той ще се появи до заглавието на страницата в текущия раздел. Това ще ви помогне да намерите вашия сайт по-бързо в историята на браузъра и отметките. Като цяло определено трябва да инсталирате ясна, ярка и запомняща се икона на сайта.
Как да инсталирате favicon на WordPress?
Има два начина.
Първи начин. В менюто "Външен вид" - "Персонализиране" - "Свойства на сайта" в секцията "Икона на сайта" щракнете върху "Избор на файл".
Качете на сайта квадратно изображение със страна поне 512 пиксела. Самият двигател преобразува изображението във фавикон.
Друг начин е да инсталирате плъгина Easy Icon. Инсталирайте, активирайте, отидете в менюто "Външен вид" - "Лесна икона".
Превъртете до края на страницата, изберете и качете подготвения файл от вашия компютър.
Най-често изображението за favicon се нарича favicon.ico. Използват и картинка във формат .png с размер 16 на 16 пиксела. Можете да изтеглите готов favicon от Интернет или да използвате някоя онлайн услуга за създаване на favicon от снимка, която харесвате.
Как да променя цвета на заглавките, връзките и фона на сайта?
Кликнете в менюто "Външен вид" - "Персонализиране" - "Цветове". Тук можете да изберете цветовата схема: тъмна или светла. Можете също да зададете цвета на заглавията, фона и връзките.
Как да организираме изхода на основното съдържание?
Кликнете в менюто "Външен вид" - "Персонализиране" - "Маркиране".
Тук можете да присвоите изхода на съдържанието (съдържание) отляво на страничната лента, отдясно или в една колона.
Как да промените заглавното изображение на шаблона Twenty Eleven?
Кликнете в менюто "Външен вид" - "Персонализиране".
Изберете Заглавно изображение.
Ще се появи форма за добавяне на изображение. Трябва предварително да подготвите изображение с размери 1000 × 288 пиксела.
Можете да качите по-голямо изображение и да го изрежете. Или можете да зададете търсенето на изображения с даден размер в Yandex Pictures и след това да редактирате изтеглената снимка в онлайн Photoshop.
Качете снимката и изпълнете командите "Избиране и изрязване" и"Реколта".
Как да задам изображение като фон?
Кликнете в менюто "Външен вид" - "Персонализиране" - "Фоново изображение". Изберете изображение.
След като качите изображението, изберете как фонът да се повтаря и запазете промените.
Как да променя цвета на главното горно меню в темата на Twenty Eleven?
Изберете "Външен вид" - "Редактор" от менюто.
В него трябва да намерите секцията, която отговаря за менюто - секцията със заглавие /* =Меню.
Вижте частта от кода, която маркирах в синьо на снимката по-долу.
Кодът използва два цвята, като и двата се повтарят четири пъти. Сменете всеки цвят с друг 4 пъти.
Ако смените само един цвят, ще имате градиент - плавен преход между черно и вашия цвят. В зависимост от цвета, който променяте, градиентът ще бъде черен отгоре или отдолу.
Ако промените и двата цвята, да речем син и циан, ще получите плавен преход между двата нюанса. Използвайте таблицата за безопасни цветове, за да разберете кода за цвета, от който се нуждаете.
Ако искате да знаете цветовия код на точка от екрана, можете да използвате програмата Pixie. Така че можете да създадете меню в същия диапазон като заглавката на сайта. Просто изберете най-тъмната и най-светлата точка в заглавното изображение и напишете техните кодове.
Смених 2 цвята наведнъж
Не забравяйте да щракнете върху бутона "Актуализиране на файла".
Как да променя фона на вътрешното съдържание на блога?
Ако искате да промените цвета на фона за цялото съдържание на блога (фона на главната колона, страничната лента, долния колонтитул, уиджетите), тогава трябва да отворите файла style.css и да промените цвета на линията, маркирана на снимката по-долу в друг раздел.
Как да премахнете връзката в долния колонтитул на тема TwentyЕдинадесет?
Намерете в менюто "Външен вид" - "Редактор". Отворете файла footer.php.
На фигурата кодът, който показва реда „Сайтът се захранва от WordPress“ и съответната връзка е маркиран.
Премахване или промяна на реда:
Можете също така да поставите код на брояч или надпис на това място, указващ, че всички права на вашия сайт са защитени.
Как да добавя допълнително меню към долния колонтитул?
На мястото на премахната връзка в долния колонтитул на шаблона можете да поставите малко меню. Вместо премахнатия кодов фрагмент, описан в предишния параграф, можете да поставите няколко връзки.
Фрагментът на менюто ще изглежда така:
Как да премахна формата за търсене в заглавката на шаблона Twenty Eleven?
Изберете "Външен вид" - "Редактор" от менюто.
Отворете файла header.php.
Как да коментирам код?
Как да премахнете горното меню под заглавката?
Създайте празно меню без добавяне на страници.
Как да добавите странична лента към шаблона на Twenty Eleven?
Изберете "Външен вид" - "Редактор" от менюто. Намерете в дясната колона файла single.php ("единичен запис") и го отворете за редактиране.
Добавете следния код точно преди него:
Сега трябва да добавим стилове за страничната лента, която ще се показва на страницата с публикации.
Такава специална страница може да се направи главна страница на сайта. Страничната лента на него може да се различава от страничната лента на други страници. Ако поставите някои джаджи в "страничната лента на любимите", те естествено ще се показват само на такава страница.
За да се показват любимите ви статии в слайдера, трябва да отидете на страницата за редактиране на важни за вас статии и да ги закачите на главната страница.
Просто поставете отметка в квадратчето „Придържане към началната страница“.
Отворете файла functions.php.Потърсете функция twentyeleven_posted_on(). Коментирайте или премахнете реда:
Отворете файла content-single.php. Премахнете кода в рамките
Отворете файла content.php. Трябва да премахнете кода в рамките на:
Отстранете правилно. Ако изтриете целия div, долният колонтитул ще изчезне. Трябва само да премахнете реда в етикета
Ако поставите полетата "име", "уебсайт" и "имейл" в един ред, тогава формулярът ще изглежда по-спретнат и по-компактен.
Новата форма ще се показва еднакво добре във всички браузъри, а също така ще се адаптира към размера на прозореца на браузъра.
В листа със стилове напишете новия CSS код за формуляра:
Как да добавя удебелен текст, когато задържите курсора на мишката над менюто?
Във файла style.css намерете реда #access ul ul :hover. Променете кода, както в примера:
Как да премахна допълнителното пространство до заглавката на сайта?
Във файла style.css намерете реда #site-title, #site-description и /* Форма за търсене */. Променете кода, както в примера:
Как да премахна допълнителното пространство между менюто и заглавието на статията?
Във файла style.css намерете реда .singular .hentry и .singular.page .hentry. Промяна на кода:
Как да добавите време към датата на публикуване?
Изберете "Настройки" - "Общи" в менюто. В опцията Формат на датата изберете „Персонализиран формат“ и въведете: Y.m.d, G:i
Каквито и промени да направите във файловете на шаблона, не забравяйте, че те ще бъдат загубени, ако актуализирате темата.
Може да се интересувате и от: