Всем привет! Если кто-то давно следит за моим блогом, то должно быть заметил, что я постоянно меняю его внешний вид. Редактирование шаблона WordPress не такая сложная штука, как может показаться на первый взгляд. Достаточно знать структуру шаблона и иметь базовые знания HTML, CSS
Установка существует автоматическая установка и ручная.
Автоматическая целиком и полностью осуществляется через админку WP: перейдите в раздел «Внешний вид» — «Темы» и выберете закладку «Добавить новую». Вам сразу предложат на выбор несколько шикарных визуальных шкурок для вашего блога. Если сраз не нашли ничего подходящего, то воспользуйтесь поиском и фильтром характеристик. Нашли подходящую? Жмите «Установить»! Далее возвращайтесь в раздел «Внешний вид» — «Темы» и ищите ее. Остается только нажать на «Активировать» и полюбоваться новым оформлением своего блога.
При установке в ручную необходимо скачать архив с темой с официального сайта WP, распаковать его и полученную папку закинуть на ftp в директорию /wp-content/themes. Лично мне этот способ кажется проще и быстрее. Хотя я и визуальным не пользуюсь — не ищу легкой жизни. Так что в этом деле с меня можете пример не брать. Я ведь могу и плохому научить.
Опять же, остается только Активировать новую шкурку.
Сейчас я буду сильно умничать, но тем не менее постараюсь простым и понятным языком донести до вас суть вопроса. Главное слушайте меня внимательно. Здесь просто нужно уловить основную суть, и все станет понятно.
Страницу блока можно представить как совокупность содержания, структуры и представления.
Текст статей, страниц, создаваемые меню и виджеты определяют содержание страницы, шаблоны темы (php файлы) определяют структуру веб страница, а стили темы (файл style.css и всевозможные дополнительные шрифты и картинки) — графическое представление. Фактически, страница блога собирается как конструктор согласно шаблонам, графически оформляется согласно стилям и заполняется согласно созданному Вами контенту.
Для удобства, я бы разбил все файлы на две группы. Шаблоны первой группы определяют части страницы:
Шаблоны второй группы определяют структуру представления страницы в целом и формируются за счет подключения шаблонов первой группы с добавлением области контента:
Визуально структура шаблона wordpress выглядит так:
Что будет, если отсутствует один из шаблонов второй группы? Его функции возьмет на себя другой из группы. Это называется иерархией шаблонов, и об этом подробно написано в кодексе WordPress . Главное понимать, что шаблоны второй группы мало чем отличаются друг от друга — только контентом и дополнительными подключаемыми плагинами (например, хлебные крошки, социальные кнопки или похожие статьи). Поэтому недостающий файл темы несложно создать самому на основе уже имеющихся. Что из себя должен представлять его контент, можно подсмотреть в соответствующем файле другой темы.
1. WordPress имеет встроенный редактор:
К сожалению, стандартный редактор не умеет подсвечивать синтаксис кода, поэтому его удобно использовать только для внесения небольших коррективов. Он находится в разделе «Внешний вид» — «Редактор».
В правом столбце представлены все файлы темы WordPress, а в самом низу style.css — файл со стилями.
2. Подключитесь к ftp, на котором находится блог. Перейдите в директорию /wp-content/themes/название_темы и откройте нужный шаблон с помощью текстового редактора, установленного на Вашем компьютере. Это несколько дольше, но зато можно использовать редактор с подсветкой синтаксиса кода.
Вот так неожиданно подошли к концу моего повествования. Не бойтесь экспериментировать — перекраивать шаблоны, лепить из нескольких тем одну, играться со стилями. Только так можно действительно чему-то научится. Конечно, свои эксперименты желательно проводить на локальном сервера, а уже окончательный вариант использовать на рабочем блоге.
Спасибо за внимание!
Прежде чем провести человека по уму, его для начала нужно встретить по одёжке, и, если она будет иметь неопрятный вид, очередь до ума может и не дойти. С человеком просто не захотят общаться и оценивать его ум. То же самое касается и интернет-проектов. Да, дизайнерское оформление сайта – далеко не самая главная вещь, и впереди неё стоят куда более важные аспекты, такие как: тематика сайта, его концепция, качественный контент, позиции в рейтингах поисковых выдач. Тем не менее, уродливый внешний вид и неюзабельность могут покалечить судьбу даже самого успешного проекта.
Потому при выборе темы оформления движка (CMS) сайта во главу угла стоит поставить читабельность шрифтов, не раздражающие цветовые решения, отсутствие визуальных препятствий для прочтения публикаций. Благо, готовые темы (шаблоны) для популярного движка WordPress, как правило, имеют приятный внешний вид, плюс к этому, использование большей части из них – совершенно бесплатно. А огромнейшее разнообразие тем для WordPress и вовсе считается одним из достоинств этого движка.
Продолжая цикл статей рубрики « », ниже подробно рассмотрим, как установить и настроить тему для WordPress.
Для работы с темами оформления войдём в консоль WordPress и во вкладке «Внешний вид » выберем раздел «Темы ».
В движке WordPress изначально предустановленно несколько тем оформления, которые можно «примерить» на сайт, нажав кнопку «Посмотреть ». Кнопка «Активировать » применит эту тему к сайту.
Чтобы получить доступ к гораздо большему выбору тем для WordPress, помимо тех, что идут в комплекте предустановленных, жмём «Добавить новую ».
Откроется каталог тем для WordPress. Просмотреть темы оформления избранные (образцово-показательные по мнению создателей движка), популярные среди пользователей или свежие, которыми каталог недавно пополнился, можно, используя соответствующие кнопки сортировки.
Для более конкретного поиска подходящей к тематике сайта темы оформления воспользуемся кнопкой «Фильтр », которая позволит выбрать, помимо расцветки, подходящий вариант с нужной разметкой колонок и с уже установленными функциями. После отметки нужных параметров жмём «Применить фильтры ».
Установка тем оформления из каталога проводится точно так же, как и в случае с изначально предустановленными в движок. Жмём кнопку «Просмотреть », чтобы наглядно оценить тему, и, если она подойдёт, нажимаем «Установить », а затем – «Активировать ».
Темы оформления для сайта или блога можно найти не только в каталоге WordPress, но также и на различных сайтах в Интернете, в частности, в специальном разделе на официальном сайте движка WordPress.Org . Здесь также можно искать темы по отдельным коллекциям или с помощью фильтров.
Выберем здесь тему и скачаем её, нажав на кнопку «Download ».
Далее скачанный архив темы необходимо распаковать и перенести в папку с темами WordPress. В папке с файлами движка выбираем папку «wp-content», затем – «themes». Если сайт был создан на , этот путь может быть следующим:
С:\inetpub\wwwroot\имя-сайта\wp-content\themes\
Ну, или если сайт находится на платном хостинге, перемещаем тему в:
public_html/wp-content/themes /
Обновляем консоль WordPress. Только что вручную добавленная тема будет видна в списке установленных. Теперь её можно «примерить» на сайт, а в дальнейшем и активировать.
Возможность детальной настройки предусматривает не каждая тема для WordPress. Если этот момент имеет принципиальное значение, и в каталоге WordPress, и на сторонних сайтах в Интернете тему следует выбирать, изначально задав в фильтрах параметр возможности настройки.
Чтобы внести в тему оформления свои коррекции, во вкладке «Внешний вид » выбираем раздел «Настроить ».
В настройках темы можно менять название и описание самого сайта. Многие темы предусматривают возможность смены цвета фона или вставки своего изображения.
Для шапки сайта можно установить свой логотип.
Организацию сайта и его функционал можно настроить с помощью виджетов.
Главную страницу сайта можно сделать статической, отменив предустановленную в большинстве тем оформления настройку автоматической публикации новых статей.
Для сохранения всех проделанных изменений жмём кнопку «Сохранить и опубликовать ».
Каждая отдельная тема оформления может содержать свои уникальные настройки, которых нет у других настраиваемых тем.
Установка и настройка тем для WordPress – только часть процесса создания «облика» сайта или блога. Есть ещё два важных вопроса, которые детально рассмотрены в статьях сайта:
Помогла ли Вам данная статья?
5 комментариевПосле установки вордпресса сайт работает, но выглядит не презентабельно. Работая со встроенной темой, у вас не получится привлечь заинтересованных читателей, потому что выглядит она довольно убого. Так что осталось определиться какую тему выбрать для сайта и найти подходящую.
В статье я расскажу, где взять темы бесплатно и как установить тему wordpress на сайт. А также про основные настройки оформления: шапка, фавикон, меню, сайдбар, статистика
На самом деле тем настолько много, что глаза разбегаются. Чтобы немного определиться с выбором, нужно хотя бы мысленно прикинуть – как будет выглядеть ваш сайт? Ответьте на несколько вопросов, которые немного сузят круг поисков:
Когда вы мысленно представите внешний вид своего сайта, вам будет намного проще определиться с выбором.
К примеру, я хочу шаблон с белым фоном и не яркими цветами, сайдбар справа одной колонкой. Наверху выпадающее меню, дополнительное меню в сайдбаре. Статьи отображаются текстом.
Посмотрите подробную видео-инструкцию как установить тему wordpress и выполнить основные настройки:
Есть несколько способов для решения этой проблемы, я рассмотрю три варианта. Можно еще заказать у фрилансеров или сделать самостоятельно, но новичкам эти способы не подойдут.
Сейчас можно смело менять тему, потому что ваш сайт пуст. Но если вы решите поменять ее снова через пару месяцев, когда уже будут статьи, посты, баннеры и другая информация, сначала сделайте резервную копию! В случае непредвиденных ошибок (криво встала тема и «сломала» сайт), просто восстановите прошлую версию.
1. Выбрать из предлагаемого списка WP
В разделе Внешний вид выберите Темы и нажмите на Добавить новую.
Здесь можно выбрать подходящий шаблон из свежих или популярных тем, либо настроить фильтр по своему желанию.
Чтобы посмотреть конкретный шаблон поближе, нажмите на Просмотреть. Если он вас полностью устраивает, жмите Установить, а дальше Активировать.
2. Скачать из интернета.
В интернете можно найти очень много бесплатных тем. Достаточно вбить в поиск «скачать шаблон вордпресс» и получите много сайтов.
Я обычно беру с сайта best-wordpress-templates.ru . Очень удобный поиск и выбор по тематике.
Но самый большой плюс – возможность наглядно увидеть предложенный шаблон на конкретном сайте. Достаточно нажать Демо и вы сможете оценить выбранную тему в действии.
Когда выберите подходящий шаблон, скачайте его и загрузите на свой сайт. Для этого зайдите Внешний вид – Темы – Добавить тему и наверху нажмите «Загрузить тему». Выберите архив с шаблоном, который вы только что скачали, нажмите Установить. И в следующем окне Активировать.
Многие шаблоны из интернета можно найти в базе WordPressа, просто введите в Поиск тем ее название. Обычно она указывается на странице шаблона.
3. Взять шаблон Александра Борисова из курса (пример на моем сайте)
Я не могу выложить его в свободном доступе, чтобы не нарушить авторские права. Но вы можете скачать его из курса по этой ссылке . Установка этого шаблона мало чем отличается от Скачать из интернета.
Каждая тема индивидуальна, так что с конкретными шаблонами нужно разбираться самостоятельно. Но есть ряд общих настроек, которые нужно настраивать везде:
Создать мобильную версию сайта
Желательно сразу задуматься о мобильной версии сайта, потому что сейчас очень многие люди заходят в интернет с телефонов/планшетов. А кроме того, с недавних пор google стал понижать в поисковой выдаче сайты, которые не адаптированы для мобильных.
Здесь есть несколько вариантов:
Если вы решили установить бесплатный шаблон у А. Борисова, для него можно приобрести мобильную версию (390 рублей).
Есть простой способ: выбрать из уже готовых вариантов. Просто вбейте в поиск Шапки для сайта и перейдите в Расширенный поиск (в google). Там настройте Форма картинок – Панорама.
Теперь все картинки в нужной форме.
Способ с Photoshop:
Запускаем программу, зайдите в Файл – Создать. Установите ширину и высоту для шапки.
Обычно нужный размер шапки указывается в самом шаблоне, но стандартный размер: ширина 1240px, высота – 200-350px (желательно 250-300px).
После этого просто переносите картинки в это поле, и подстраивайте под размер. Для удобства зажмите Shift – так размер будет увеличиваться равномерно со всех сторон.
Фавикон – маленькая иконка 16×16 пикселей, отображается на вкладке браузера рядом с названием вашего сайта или страницы. Делается довольно просто и быстро, а сайты с фавиконом выглядят намного лучше, чем без него.
Есть два способа создать фавикон:
После этого вы получите маленький файл, который нужно перекинуть в главный раздел сайта. Зайдите в Filezilla, www – site.ru и перекиньте фавикон в эту папку.
Важно: у изображения должно быть разрешение ico. Если у вас другой формат, можно переконвертировать его с помощью онлайн-сервисов (к примеру, image.online-convert.com/ru/convert-to-ico)
После настройки шаблона нужно заняться заполнением сайта: страницы, рубрики, меню.
Для начала нужно создать несколько страниц:
Для создания страниц можно использовать раздел в левом меню Страницы – Добавить новую. Либо добавить с помощью верхнего меню +Добавить – Страницу.
Создание раздела : в левом меню выберите Записи – Рубрики. И здесь создавайте новые рубрики. Если хотите создать подрубрику (к примеру, Супы входят в рубрику Рецепты), нажмите Родительская и выберите из выпадающего списка Рецепты.
После этого можно создать меню :
Зайдите в главном меню (слева) Внешний вид – Меню. Придумайте название (к примеру, верхнее или главное меню) и нажмите «Создать новое меню». Добавите из списка страниц и рубрик слева нужные элементы – поставьте галочку и нажмите Добавить в меню.
Нужно добавить его в сайдбар, чтобы читателям было удобней ориентироваться. Для этого перейдите в раздел Внешний вид – Виджеты. Из Доступных виджетов выберите Произвольное меню и перенесите в правую часть – поместите в раздел SideBar. Теперь из выпадающего окна выберите меню, которое вы создали (к примеру, основное меню).
Сайдбар – боковая колонка на сайте, на которой содержится вспомогательная информация для посетителей (поиск, меню, подписное окно и другое).
В сайдбар таким же способом можно помещать и другую информацию: просто перемещайте нужный виджет в раздел сайдбара.
Очень полезный виджет Текст – он универсальный. В него можно вставлять различный код (к примеру, для статистики, баннера или подписки) и информация будет отображаться в сайдбаре. Имейте это в виду.
Кстати, с помощью этого виджета можно →
Для начала зайдите на сайт liveinternet.ru, нажмите наверху слева Получить счетчик. Заполните информацию о вашем сайте.
В следующем окне проверьте правильно ли все указано, если все верно, проходите дальше.
Выберите внешний вид вашей статистики – как она будет выглядеть? Полная информация на месяц или только один день? Если хотите поставить другой цвет, просто нажмите на иконку и выбирайте.
Внизу поставьте галочку в виде двух картинок – так вы сможете разместить картинку в сайдбаре или другом удобном месте. Намного удобней.
После этого у вас будет два окошечка с кодом:
Первый нужно разместить в HTML-код. Для этого зайдите Внешний вид — Редактор и в списке справа выберите Заголовок (header.php). Найдите в коде слово body. Можно нажать ctrl +F, чтобы было проще найти это слово.
Когда найдете, вставьте код из первого окна под этой строчкой и сохраните.
Второй – это ваша картинка, вы можете ее разместить в удобном месте. Например, в сайдбаре. Зайдите Внешний вид – Виджеты. Выберите Текст и перенесите в раздел сайдбара. Назовите (к примеру, Статистика) и вставьте код. Чтобы ссылки не индексировались, можно закрыть его для поисковых роботов. Для этого добавьте . Посмотреть, как именно это выглядит можно на скрине.
Чтобы посмотреть подробную статистику, нажмите на иконку в сайдбаре и введите домен и пароль, которые вы указали при регистрации.
Вот и вся основная информация по настройке темы. Теперь вы знаете, какую тему выбрать для сайта и как установить тему wordpress. А также выполнить другие основные настройки оформления (как установить фавикон на сайт, как создать шапку для сайта в фотошопе, как поставить статистику и меню). Если остались вопросы, пишите в комментариях.
Для того чтобы понять, как установить и настроить тему и другие незначительные нюансы будет рассмотрен пример на шаблоне с именем «Aldehyde», который можно с легкостью найти в бесплатных шаблонах проекта WordPress.
Заходим в административную панель сайта. Переходим в раздел меню “Внешний вид/Темы”. Жмём на кнопку добавить новую.
В поиске набираем название искомой темы, в нашем случае это «Aldehyde». Кликаем на кнопку “установить”, а затем “активировать”. После этого новая тема заработает. Теперь нам нужно настроить её под себя.
Для того чтобы приступить к настройке темы или шаблона необходимо перейти в меню к пункту “Внешний вид” и кликнуть по кнопке «Настроить».
В разделе Header settings (Настройки шапки):
Во втором разделе Design and layout (Дизайн и оформление) можно выполнить настройку дизайна и макета сайта. В этом разделе можно установить желаемое отображение контента в блоге (одна или несколько колонок). Помимо отображения контента раздел позволяет активировать или отключить на некоторых страницах или даже на всем сайте отображение боковых колонок. Еще в этом разделе можно применять различные таблицы стилей и устанавливать информацию в подвале сайта.
Раздел Design and layout содержит следующие подпункты:
В следующем разделе именуемым Main Slider (Основной слайдер) можно выбрать подходящие для него настройки. Но в первоначальной стадии он не является нужным, поэтому не рекомендуется пока обращать на него особое внимание. К недостаткам основного слайдера можно отнести высокую загруженность ресурса. Более того этот компонент можно по праву называть противником мобильных версий сайтов.
Затем идёт раздел Custom showcase (Пользовательская витрина). Здесь вы можете красиво оформить 4 блока с ссылками на важные страницы вашего сайта.
Далее будут предложены разделы виджетов и статичности главной страницы, их пока рекомендуется пропустить, потому что статичность основной страницы уже поддавалась настройке, а настройку виджетов более удобно совершить в основном меню конструктора. Для этого необходимо перейти в раздел внешнего вида и кликнуть по кнопке «Виджеты». После этого в левой части станут доступны различные для применения и использования виджеты. Путем перетаскивания мышью можно переместить понравившийся виджет в подвал или боковые колонки сайта. После этого надо произвести их легкую настройку и сохранить все действия.
Очень важно не загружать виджетами боковые колонки ресурса, гораздо эффективнее оставить только самые необходимые из них.
Для того чтобы практично настроить отображение меню ресурса, которое можно найти в категории «Внешний Вид» следует прибегнуть к следующей инструкции.
Сегодня, я хотел бы поговорить о способах установки тем (themes) на wordpress. Ведь после создания блога и его базовой настройки, нам обязательно нужно сделать ресурс не похожий на другие или с какой-то своей изюминкой, а как это сделать? Конечно установив тему. Но она, по возможности, должна быть уникальной, хотя можно воспользоваться и стандартными шаблонами вордпресс или темами, которые можно найти в сети интернет, в свободном доступе, а также шаблон для блога можно купить. Но самые лучший вариант — это уникальный шаблон, которого нет еще ни у кого, ведь тема нашего сайта — это его лицо, которое посетитель запоминает и может узнать наш блог среди других. А когда она стандартная или часто используемая на многих ресурсах, ваш ресурс будет теряться в этой толпе блогов или сайтов. Поэтому, давайте рассмотрим способы установки тем на wp .
Сначала, в админке wordpress нужно перейти к установке тем. Для этого, слева, в меню есть пункт «внешний вид «, а в этом разделе есть подраздел «темы «. Он нам и нужен сегодня, для установки шаблона на вордпресс. После перехода в подраздел можно увидеть две вкладки — нам нужна вторая, под названием «установить темы».
С помощью поиска подобрать шаблон довольно просто, достаточно указать нужные вам критерии и нажать на кнопочку «найти темы». С этим проблем не должно возникнуть. После нажатия появятся страницы с темами, которые должны соответствовать вашим критериям. Для каждой будут описания, правда не на русском языке, но сейчас web-браузеры умеют переводить, поэтому проблем, также не должно быть. Еще у каждого шаблона будут две возможности, установка и просмотр. То есть перед тем, как окончательно решиться установить тему на wordpress, у вас будет возможность ее «просмотреть» и более подробно изучить. А после этого, принять решение — устанавливать или нет.
Для установки достаточно нажать на кнопку «установить» и подтвердить установку. После этого, вы увидите сообщение об успешной установке и останется только активировать тему для вордпресс.
Еще, с помощью поиска wordpress, можно установить шаблон набрав ключевое слово, автора или метку в форме поиска. Но работает эта функция не очень. Ее можно использовать зная точное название или хотя бы пару ключевых слов из названия.
Вот так просто, можно установить тему для вордпресс , используя поиск.
Следующий вариант установки не сложнее первого. Нужно найти тему в сети интернет и скачать к себе на компьютер. Обратите внимание на то, что она должна быть запакована в архив, в формате zip. После этого, во вкладке «установить темы «, нужно нажать на «загрузить».
Для установки, нужно выбрать файл, с помощью соответствующей кнопки. И нажать на кнопочку «установить». После этого вы увидите сообщение об успешной установке шаблона для wordpress . И останется только ее активировать. Все, наша тема для вордпресс установлена.
А также, в этой вкладке («установить темы») можно посмотреть избранные, свежие и недавно обновленные шаблоны, предлагаемые wordpress.
Сначала, нужно найти тему в интернете и скачать ее. После этого, если она запакована в архив, ее нужно распаковать. А дальше есть два варианта: установка на локальный сервер и установка на движок вордпресс, находящийся на хостинге.
1) Установка темы wordpress на локальный сервер : Для установки на сервер, необходимо папку темы скопировать в папку themes. Найти ее можно по следующему пути: C/Webservers/home/localhost/www/ваша папка с установленным движком wp/wp-content/themes . Копируем папку шаблона в папку themes и перезапускаем локальный сервер . После этого, идем в админку wordpress и во вкладке «управление темами», находим наш шаблон. И нажимаем «активировать». Шаблон для вордпресс на локальный сервер установлен.
2) Установка темы вордпресс на хостинг . Здесь зависит от вашего хостинга, который вы используете и ваших предпочтений. На хостинге, который я использую, можно загрузить в нужную папку архив и уже там его распаковать. И после этого, достаточно перейти в «управление темами» и активировать ее. Все очень просто. Но более распространенный способ — это воспользоваться FTP-клиентом, например FileZilla. Это бесплатный FTP-клиент для загрузки или скачивания с FTP-серверов.
Итак, для загрузки темы на хостинг , нужно запустить программу и в поля хост, имя пользователя, пароль и порт вписать ваши данные, предоставленные для работы с FTP, при . После заполнения всех необходимых полей нажимаем на кнопку «быстрое соединение». В правом окне, под названием «удаленный сайт» ищем папку themes. Она должна находится по следующему пути: Ваш домен.ru/public_html/wp-content/themes .
Открываем папку и сюда копируем папку с темой. Я, это делаю просто перетаскиванием. То есть, просто перетаскиваю папку с шаблоном в папку themes в правом окошке FTP-клиента.
После копирования, нужно перейти во вкладку «управление темами» и активировать тему.
Вот такими не хитрыми способами можно установить тему на wordpress. Надеюсь все было понятно и полезно. Удачи, в ваших начинаниях.
Да, и не забываем постоянно себя развивать. Для ускорения вашего развития, я вам рекомендую видео курс: Все Технические Моменты Онлайн Бизнеса в Видеоформате , от известного автора видео курсов — Евгения Попова.
