Навряд ли вас, как вебмастера, устроят стандартные параметры скачанного шаблона. Наверняка вы захотите изменить какие-то элементы макета, поменять его структуру, редактировать стиль оформления и многое другое. Настройка шаблона — это те азы, которыми должен владеть любой сайтостроитель. Все когда-то с этого начинали, и вам тоже стоит научиться. После прочтения данной статьи вы будете знать, как изменить шаблон Joomla, насколько это просто делать и как быстро редактировать макет.
Как установить шаблон на сайт
Для начала нужно разобраться с инсталляцией темы оформления на ресурс. Это основное действие, которое вы должны уметь осуществлять даже с закрытыми глазами. Установка шаблона в Джумла — очень простой навык, которым грех не владеть.
Для начала вам нужно загрузить на диск компьютера файл шаблона. Обычно, в каталогах распространяют архивированные файлы макетов, и если вы нашли zip или tar.gz, то это хорошо. Движок Joomla тем и славится, что им очень легко управлять. Буквально за считанные минуты вы сможете изменить оболочку сайта, переодев его в другой шаблон.
Для изменения темы оформления ресурса вам необходимо пройти в «Менеджер расширений». Далее вам предстоит нажать «Загрузить файл пакета» и отыскать архив шаблона на компьютере. После загрузки нажмите на кнопку активации установки макета — тема постепенно начнет инсталлироваться. Либо если вы не скачивали файл на компьютер, то можете вписать URL в специальное поле и движок сам загрузит и установит шаблон на сайт.
Еще один вариант установки шаблона, который используют не так часто, как предыдущий — это загрузка распакованного шаблона сразу на хостинг при помощи FTP-менеджера. Главное в этом деле — это не ошибиться с папкой, куда вы отправляете дистрибутивы шаблона. Если поместите в неправильную директиву, то макет не появится в менеджере шаблонов, а может и нарушит работу некоторых составляющих сайта. Вам необходимо найти папку templates и внутри нее создать каталог для данного шаблона. Затем перейдите в админку в «Менеджер расширений» и нажмите на «Поиск» — движок отыщет загруженный вами шаблон на хостинге.
Как редактировать внешний вид шаблона в Joomla
После установки шаблона сайта можно перейти к самому интересному — вам предстоит его отредактировать под свои потребности.
Настройка макета — это интересное занятие, которое обязательно вас втянет в себя с головой, вот увидите!
Но для начала вам нужно разобраться, что к чему, и данное руководство в этом поможет.
Дело в том, что шаблоны Джумла состоят из блочной системы, впрочем, как и макеты многих других движков. Это удобно и легко для освоения, и в этом вам необходимо разобраться. Иногда настройка макета доступна прямо из админки. Такое бывает редко и в основном только в случае, если вы установили на сайт платный макет. В иных же случаях вам придется иметь дело напрямую с кодом шаблона. Не стоит этого боятся, как уже говорилось, — у современных макетов простая блочная система. Чтобы редактировать какой-то элемент, вам лишь нужно найти соответствующий блок в коде всего макета.
К счастью, поиск необходимых элементов в шаблоне не придется вести вручную. Настройка макета значительно облегчится, если вы будете использовать специальный браузер. Под словом «специальный» имеется ввиду такой браузер, при помощи которого можно просматривать код страницы в целом и отдельных элементов. Примером такого браузера является Гугл Хром. Чтобы увидеть, в каком месте кода находится конкретный элемент, вам нужно лишь навести мышкой на него, нажать правую кнопку и выбрать пункт «Просмотр кода элемента». После этого браузер откроет выбранную часть кода, и вы сможете увидеть нужный вам блок.
Далее, чтобы поменять настройки блока, вам необходимо отредактировать его при помощи специального редактора. Для этого можете установить популярный Notepad++, либо же использовать стандартные возможности своей операционной системы, к примеру, легендарный Блокнот. Вам необходимо будет загрузить весь код внешнего оформления шаблона в блокнот. Затем нажмите Ctrl+F — включится «Поиск». Найдите ту часть кода, какую высветил вам браузер при нажатии на код элемента. А затем откорректируйте нужные вам данные.
Если вы не понимаете, что нужно редактировать, тогда вам придется посвятить несколько вечеров чтению тематических статей по написанию CSS. Либо просмотрите в Интернете видео — их сейчас хватает. Главное, что вы должны понять — это какой тег, за что отвечает. Некоторые составляющие легко осмыслить, зная элементарный английский. К примеру, тот же цвет в CSS обозначается, как color. До этого не сложно дойти собственными умозаключениями.
Путем редактирования CSS вы сможете изменить большинство элементов на сайте, начиная от логотипа и заканчивая его шириной. Вы сможете даже изменить фоновое изображение. Для этого вам нужно будет добавить новую картинку в папку images, а также прописать в коде путь к ней на хостинге.
Кроме того, большую пользу окажут различные расширения, которые вы установите на сайт. Именно от набора плагинов, модулей и компонентов зависит то, каким будет ваш ресурс. При помощи CSS вы сможете изменить лишь элементарные настройки, но не сумеете добавить новый функционал на площадку. Зато с компонентом вы сможете изменить основную часть страницы, а с модулями добавить функциональные блоки для различных целей. А плагины улучшат работу самого сайта, а также позволят вам вставлять всяческие функции прямо посреди контента.
Вам остается лишь определить, каким должен быть ваш сайт, а затем найти подходящие инструменты для реализации этой затеи!
Сегодня я расскажу о том, как сделать внешний вид сайта на WordPress уникальным, для чего нам понадобиться всего-навсего переделать шаблон WordPress.
Наверняка вы обращали внимание, что внешний вид многих из сайтов, встречающихся на просторах интернета, реализован с использованием бесплатных шаблонов WordPress, что никак не идет в плюс репутации ресурса.
Более того, нередко можно встретить сайты, на страницах которых размещены внешние ссылки на сторонние ресурсы, размещенные создателями бесплатных шаблонов.
Разумеется, в идеале нужно использовать платные шаблоны, но для этого необходимо вкладывать денежные средства.
Если тратить деньги на тему WordPress не хочется, если у вас молодой сайт, к примеру, а навыков в создании шаблонов у вас нет, то логичнее всего будет переделать существующий шаблон WordPress.
Итак, для того, чтобы переделать шаблон WordPress и превратить его в каком-то роде в уникальный, нам понадобиться отыскать понравившийся бесплатный шаблон.
На просторах сети интернет не составит труда найти массу бесплатных шаблонов, так что проблем на данном этапе возникнуть не должно.
Для данной статьи я подобрал шаблон, который выглядел следующим образом:
Характеристики исходного шаблона были следующие: шаблон для WordPress 3.7.1, над подвалом размещается до 3 блоков с любыми виджетами, есть логотип (PSD), который можно легко отредактировать. Форма поиска расположена на одной линии вместе с главным меню.
План действий по изменению шаблона следующий:
- изменить внешний вид шапки шаблона (header);
- изменить внешний вид подвала шаблона (footer);
- изменить содержимое сайдбара (sidebar);
- очистить файлы шаблона от ненужных внешних ссылок, в том числе закодированных;
- отладить работоспособность шаблона и вернуть все функции, доступные до смены шаблона (форма комментариев ВКонтакте, стрелка вверх, кнопки социальных сетей и т.д.).
Так выглядит краткий план действий по переделке шаблона WordPress. Теперь подробнее.
Итак, переходим к более подробному рассмотрению каждого из вышеуказанных пунктов.
Для изменения внешнего вида шапки (header) шаблона нам необходимо будет в каталоге с исходной темой найти папку images , в которой в свою очередь найти файлы картинок, используемых в шапке шаблона. Сделать это не составит никакого труда, в моем случае это две следующие картинки:
Должен сказать, что случай с выбранным мной шаблоном для редактирования частный, и не обязательно внешний вид шапки должен быть составлен именно из двух картинок. Не будем на этом останавливаться, тут ничего сложного нет.
И вообще, в данной статье я рассматриваю вопрос изменения шаблона WordPress так сказать «малой кровью», то есть с минимальными переделками, чтобы было понятно новичкам. Именно по этой причине размер картинки, используемой в хэдере, оставим прежним.
Так вот, теперь если с помощью графического редактора, к примеру, Photoshop, соединить эти два изображения, то мы получим следующее:
Надеюсь ход моих мыслей понятен? Если не совсем, то поясню: нам нужно оценить размер необходимого изображения, которое мы в дальнейшем создадим сами для оригинального внешнего вида нашего сайта, ведь в моем случае именно это изображение играет определяющую роль в дизайне выбранного шаблона.
Итак, соединив изображения, определяем размер необходимого изображения, а также с помощью направляющих в Photoshop обозначаем положение на холсте характерных элементов функционала шаблона: поля, на котором располагаются кнопки меню и так далее. У меня получился следующий результат:
Теперь тем, кто имеет маломальские навыки работы в Photoshop не составит труда разделить изображение на две части, пропорциональные исходным изображениям, после чего сохранить их под именами исходных картинок шаблона в формате jpg или png . Результат моих действий ниже:
Далее закидываем данные файлы в каталог images переделываемой темы (если все действия с файлами вы производите на хостинге, то можете воспользоваться для доступа к ним FTP-клиентом, о чем написано в ). Смотрим результат — все должно заработать как часы. Готово!
Также я заменил логотип, расположенный в шапке шаблона на свой:
И вместо фразы какое-либо содержание вставить необходимую информацию, которую вы хотите отображать в футере вашего сайта. В моем случае код следующий:
Цвет фона в футере, на котором будет отображаться указанный текст, можно изменить следующим образом: так как у нас id вышеуказанного контейнера div носит название footer , то в файле css -стилей style.css нужно найти строки, отвечающие за назначение стилей для него (привожу пример из своего шаблона):
| 1 2 3 4 5 6 7 8 9 | #footer { background : none repeat scroll 0 0 #2E4263 ; color : #FFFFFF ; font-size : 12px ; margin : 0 auto ; padding : 10px 10px 0 ; text-align : center ; width : 950px ; } |
#footer { background: none repeat scroll 0 0 #2E4263; color: #FFFFFF; font-size: 12px; margin: 0 auto; padding: 10px 10px 0; text-align: center; width: 950px; }
И прописать нужный код палитры цветов в поле background .
Вот такими нехитрыми действиями над файлами шаблона я изменил внешний вид шапки и подвала своего сайта.
Изменить содержимое сайдбара довольно просто: нужно всего лишь в разделе Внешний вид → Виджеты админ-панели WordPress подключить или отключить соответствующие виджеты, а также настроить их. Тут все на ваше усмотрение, ничего сложного нет. Добавлю лишь то, что порядок отображения рубрик в сайдбаре можно поменять с помошью специального плагина, о чем в моем сайте есть .
Про то, как из шаблона удалить ненужные внешние ссылки (в том числе закодированные) я писал в , ознакомьтесь с данной информацией, так как при изменении какого-либо из бесплатных шаблонов WordPress> значимость данной процедуры в дальнейшей судьбе развития вашего ресурса переоценить сложно.
Напоследок нужно проверить работоспособность каждой функции вашего ресурса, для чего просто «походите» по разным страницам и ссылкам своего сайта и оцените как работает та или иная функция.
Не лишним будет также проверить то, как ваш ресурс отображается в различных интернет-браузерах.
Ну и конечно необходимо вернуть на место все утраченные вследствие смены шаблона функции, к примеру, такие как:
Проделав все вышеуказанные процедуры по переделке шаблона WordPress, вы создадите уникальный дизайн своего сайта, который будет радовать вас и конечно же посетителей, что несомненно положительно скажется на продвижении и раскрутке вашего ресурса.
На этом все, удачи вам!
Каждый документ Word связан с каким-то шаблоном. Если Вы для текущего документа используете настраиваемый шаблон, но забыли какой именно, то Word позволяет это очень легко выяснить. И также легко Вы можете изменить шаблон, связанный с текущим документом.
Замечание: Иллюстрации для этой статьи взяты из Word 2013.
Чтобы определить или изменить шаблон, связанный с текущим документом, Вам потребуется вкладка Разработчик (Developer). Включите отображение этой вкладки на Ленте и откройте её.
В разделе Шаблоны (Templates) нажмите Шаблон документа (Document Template).
Откроется диалоговое окно Шаблоны и надстройки (Templates and Add-ins). В поле Шаблон документа (Document template) записано имя шаблона (или путь к файлу шаблона), связанного с текущим документом. Чтобы изменить шаблон, нажмите Присоединить (Attach).
В диалоговом окне Присоединение шаблона (Attach Template) автоматически откроется папка, выбранная по умолчанию для настраиваемых шаблонов. Выберите шаблон в этой папке или перейдите в другое расположение, чтобы выбрать другой шаблон. Затем нажмите Открыть (Open).
Теперь в поле Шаблон документа (Document template) показан полный путь к файлу шаблона. Если Вы хотите, чтобы стили документа автоматически обновлялись, при закрытии этого диалогового окна, поставьте галочку для параметра Автоматически обновлять стили (Automatically update document styles). Нажмите ОК , чтобы сохранить изменения и закрыть диалоговое окно.
Содержимое документа изменится в соответствии с новым шаблоном. Стили, настраиваемые панели инструментов, макросы (если настраиваемый шаблон был создан и сохранён с расширением .dotm ), сохранённые в шаблоне, теперь доступны в Вашем текущем документе.
Замечание: Присоединение шаблона к документу не добавляет к нему текст или картинки из этого шаблона. Это происходит только в том случае, когда вы создаёте из шаблона новый файл.
При закрытии Word, скорее всего, Вам будет показано диалоговое окно, как на рисунке ниже. Это предупреждение о том, что стили в шаблоне, который связан с документом, были изменены. Нажмите Сохранить (Save), чтобы сохранить изменения, Не сохранять (Don’t Save), если не хотите сохранять изменения, или Отмена (Cancel), чтобы вернуться к редактированию документа и не закрывать Word.
Замечание: Такое диалоговое окно может появиться, даже когда Вы не делали никаких изменений в шаблоне. Если Вы не хотите изменять шаблон, просто нажмите Не сохранять (Don’t Save).
Эту процедуру можно использовать и для того, чтобы отсоединить шаблон от документа. Для этого просто присоедините к документу шаблон Normal вместо существующего. Помните, что у каждого документа должен быть связанный с ним шаблон.
Изменение и редактирование шаблона подобно изменению и редактированию обычного документа. Разница состоит лишь в том, что необходимо открыть шаблон, а не документ. Разница невелика, но существенна, поскольку шаблон все же не является документом.
- Выберите команду Файл>Создать .
На экране появится область задач Создание документа .
- Выберите шаблон из списка или щелкните на ссылке На моем компьютере , чтобы открыть шаблон с жесткого диска.
На самом деле вы при этом не открываете шаблон, а создаете на его основе новый документ. Вы пользуетесь не самим шаблоном, а ссылкой на него.
- Внесите изменения.
Шаблон редактируется точно так же, как и любой другой документ. Не забывайте только, что вы имеете дело с шаблоном, а не с "настоящим" документом. Все изменения стилей или текста вызовут изменение шаблона, а потом будут сохранены на диске как тот же шаблон.
- Сохраните отредактированный шаблон, выбрав команду Файл>Сохранить как .
- Присвойте шаблону новое имя, а исходный шаблон оставьте без изменений.
- Выберите в раскрывающемся списке Тип файлов значение Шаблон документа .
- Щелкните на кнопке Сохранить .
Примечание
Изменения, внесенные вами в шаблон, не повлияют на документы, созданные с помощью этого шаблона раньше. Однако они отразятся на документах, которые вы создадите после изменения шаблона.
Загадка сохранения файлов шаблонов на жестком диске
Зачастую легче изменить существующий шаблон, как описано в этой главе, чем найти необходимый [ шаблон на жестком диске своего компьютера. Не думайте, что я преувеличиваю, но места, в которых Word сохраняет шаблоны документов, найти совсем не престо. Расположение шаблонов - это не секрет, но само место выбрано, мягко говоря, неудачно. В Windows XP в качестве хранилища всех данных пользователя используется папка Documents and Settings. В этой папке вы найдете папку Application Data, в которой многие приложения сохраняют данные, специфические для пользователей. Шаблоны следует искать таким образом: найдите папку Microsoft, а в ней папку Шаблоны . Сомневаюсь, что без посторонней помощи Сусанин смог бы найти это место.
Каждая тема оформления имеет ряд настроек, изменить которые можно из панели управления CMS. Разнообразие параметров от шаблона к шаблону может меняться, но настроить из админ-панели логотип, фон, шрифты, сайдбары, название, описание сайта позволяет практически каждая тема.
Несмотря на это владелец сайта может захотеть изменить какие-то мелочи, править которые панель управления не позволяет. В таком случае можно нанять веб-мастера, но если нет денег или есть время, в шаблоне легко можно разобраться и внести необходимые правки самостоятельно.
Тема движка состоит из множества файлов. Зная, за какую часть сайта каждый из них отвечает, вы легко сможете править дизайн шаблона CMS «под себя».
В файлах темы находится код HTML, PHP и CSS. По HTML/CSS на сайте есть отдельный справочник, а знаний PHP для формирования дизайна в принципе не требуется.
Итак, в любом шаблоне WordPress есть следующие файлы.
1. index.php . Файл формирует главную страницу сайта и вызывает другие файлы темы оформления.
2. header.php . Создаёт верх, «шапку» сайта - обычно она содержит логотип, название, описание веб-ресурса, а также горизонтальное меню. HTML-контейнер тоже находится в этом файле.
3. footer.php . Содержит код нижней части сайта, его «подвал».
4. style.css . Файл каскадных таблиц стилей. Так как обычно он бывает достаточно большим, style.css хорошо прокомментирован. К сожалению, чаще всего на английском, но базовых знаний будет достаточно, чтобы понять, какая часть кода за оформление каких элементов отвечает. Подробнее о CSS читайте здесь.
Это обязательная основа шаблона WordPress, но обычно файлов темы гораздо больше, и вот встречающиеся чаще всего.
1. single.php - отдельный пост.
2. page.php - страница.
3. sidebar.php - боковая панель/панели.
4. archive.php - архивы статей.
5. search.php - страница поисковой выдачи.
6. comments.php - вывод комментариев.
7. 404.php - страница ошибки с кодом 404 (Файл не найден).
8. function.php - файл, содержащий функции темы оформления. В него вы можете добавить и свои собственные PHP-скрипты.
Конечно, обычно шаблоны содержат гораздо больше файлов, чем было описано выше, но они, как правило, не нуждаются в редактировании. Кроме того, о назначении каждого файла вы можете узнать из его названия и комментариев внутри.
Редактировать шаблоны часто требуется, чтобы исправить или добавить какую-нибудь мелочь. Ниже приведено несколько распространённых ситуаций.
Добавить меню
Меню можно располагать не только в местах, установленных темой (делается это через виджеты), но и в любой другой части сайта или даже на определённой странице.
Чтобы вставить меню в любое место, добавьте строку:
непосредственно в код страницы там, где хотите его разместить. Строка сработает, если произвольное меню на сайте всего одно. При наличии нескольких в код следует добавить строку вида:
"Меню_1")); ?>
где вместо Меню_1 нужно ввести название вашего меню.
Изменить страницу 404
Если ссылка ведёт на несуществующую страницу или файл, WordPress переводит пользователя на страницу ошибки с кодом 404 (Файл не найден). За неё отвечает файл 404.php , хранящийся в папке активной темы. Зачастую на экран выводится английский текст, и желание владельца русскоязычного сайта перевести его на родной язык вполне понятно.
Чтобы изменить содержимое страницы откройте в редакторе файл 404.php , найдите строки с отображающимся в браузере текстом и измените их (выводимый текст чаще всего заключается в кавычки). Например, в одной из стандартных тем (twentyfourteen) вас будет интересовать следующий код:
Замените текст в кавычках (не там, где twentyfourteen, а другой) на свой и получите видоизменённую страницу 404.
Прописать копирайт
Внизу сайта принято писать служебную информацию, в частности, годы работы ресурса и копирайт. В подавляющем большинстве случаев свою «метку» в файле footer.php оставляют авторы тем оформления, а веб-мастера, естественно, хотят заменить эту информацию на свою.
За «ноги» сайта, как мы знаем, отвечает хранящийся в корне активной темы файл footer.php , и искать отвечающий за копирайт код следует именно в нём.
Например, тема flat-white вспомогательную информацию прячет в следующих строках этого файла:
" title=" "> ">
Русифицировать текст
Частенько шаблоны WordPress русифицированы не до конца или не переведены вовсе. Зная файловую структуру темы и то, что показываемый пользователю текст (если это не переменная) в коде всегда взят в кавычки, легко найти и самостоятельно перевести нужный фрагмент, причём не обязательно искать слово вручную - для этого можно воспользоваться автоматическим поиском, который присутствует в каждом редакторе кода.
Например, в шаблоне flat-white сразу хочется русифицировать как минимум две надписи: «READ MORE» и «Leave a Comment», так как их видно на главной странице.
За главную страницу отвечает файл index.php , расположенный в корне каталога темы, следовательно, редактировать надо его. Но текста надписей в нём нет, поэтому необходимо разбираться в коде, чтобы узнать, где они хранятся. В нашем случае за информацию под постами на главной странице отвечает файл template-parts/content.php , подключенный строкой
Если перейти в него и в коде
текст Leave a Comment заменить на
