Резиновая тема WordPress
Где взять резиновый шаблон
Это первая статья из серии о Резиновой теме F2. В конце статьи стоит ссылка на следующую статью. В правом сайдбаре в виджете: Поиск по меткам нажмите на: Резиновая тема и попадёте на страницу, где показаны все статьи об этом шаблоне. В этих статьях рассмотрены все важные настройки и изменение дизайна пошагово и в картинках.
Многие владельцы сайтов (блогов), рано или поздно, задумываются об установке на свой блог более просторной темы (шаблона). Когда мной впервые был установлен движок WordPress на самый первый блог, то шаблон, который установлен в WordPress, не очень радовал меня своим видом. Ну откуда я мог тогда знать, что даже из этого простенького шаблона можно сделать “шедевр” , отличающийся и выделяющийся среди других, подобных ему, но речь сегодня пойдёт не о нём. В интернете очень много бесплатных шаблонов с двумя боковыми колонками но, почти все они, имеют фиксированную ширину. Причём, ширина текстового поля такая, что работая с текстом, ощущаешь себя баскетболистом в “запорожце”…
Наконец, удалось найти примерно то, что требовалось. И хотя, на первый взгляд тема была невзрачная, мне казалось что, постепенно, приобретая определённые знания и опыт, всё-таки удастся сделать из неё что-то уникальное, так подсказывала интуиция. Вот, эта тема:
Нашёл я её сразу, как только вписал в поисковик: — “Резиновые темы”, тут же попал на страницу с этим шаблоном. Называется он F2 и, хотя у него фиксированная наружная ширина, он может сжиматься до размеров любого монитора имеющего меньшую ширину. Так при ширине монитора 1028px, тема, при своей ширине 1240px, сжимается под ширину монитора, сохраняя пропорции введённой информации. У меня ширина монитора 1440px, поэтому, по бокам имелись небольшие, пустые поля. В этом посте, я покажу и расскажу, как я видоизменял сайт о садоводстве. Скачать тему можно по этой ссылке: Скачать F2
Установка темы
Установить тему можно из админ-панели вашего блога или через FTP-клиент. Разница лишь в том что, из админки можно установить архив темы, а через FTP-клиент, тему нужно предварительно разархивировать и загружать папку с темой по этому пути: /domains/ваш домен/public_html/wp-content/themes . Как бы там ни было, тема установлена, активирована и мы идём в админ-панель.
Настройка шаблона
В Меню (слева) найдите раздел: Внешний вид и выберите: F2 Настройки. Рассмотрим настройки предусмотренные автором шаблона.
Настройки шапки. Высота шапки: по умолчанию выставлен размер 90px, вы можете выставить любую, удобную вам, высоту. Следующие три настройки, в выделенном прямоугольнике — цветовые. Кликните левой клавишей мыши рядом с одним из выставленных цветовых кодов и в открывшейся палитре, выберите подходящий цвет для каждой области шапки блога.
Поставьте галочку в чекбоксе напротив: Показывать горизонтальное меню.(стрелка внизу)
Чтобы вставить картинку в шапку блога, нужно предварительно найти подходящую или создать в графическом редакторе (Photoshop, Paint.net и др.). Картинка должна иметь ширину 1240px, а высоту определите сами. Слишком высокую картинку делать не стоит, оптимальный размер 200-300px. Если картинка готова, поставьте галочку в чекбоксе: Использовать фоновый рисунок в заголовке, после чего откроется адресная строка в которую нужно будет вставить адрес, где будет находиться картинка для шапки. Для этого, кликните по ссылке, указанной стрелкой.
В открывшемся окне, кликните по кнопке: Выберите файлы
В открывшемся проводнике вашего компьютера, откройте папку с подготовленной картинкой, выделите её и нажмите: Открыть
В открывшемся загрузчике вашего блога выделите ссылку на картинку, кликните по ней правой клавишей мыши и в открывшемся контекстном меню, выберите: Копировать. Сохраните изменения.
Снова откройте: F2 Настройки и вставьте скопированную ссылку в адресную строку.
Не обязательно писать заголовок сайта в картинке, когда создаёте её в Фотошоп или в другом редакторе. Можно оставить место для заголовка и описания, а в настройках, поставить галочку в чекбоксе: Показывать заголовок блога и описание в шапке?, тогда шапка будет выглядеть примерно так:
Но, это шапка с обновлённого блога и имеет другие размеры, поэтому для наглядности, используем шапку, подготовленную ранее для этого шаблона, её высота: 300px, ширина: 1240px, а галочку в чекбоксе оговорённом выше, ставить не будем. Не забудьте сохранить изменения.
Перейдите на главную страницу блога и посмотрите, как будет выглядеть блог с новой шапкой. Если всё устраивает, то в следующей статье вернёмся в настройки шаблона и продолжим создание нашего блога.
Продолжение статьи читайте в статье: Как изменить дизайн шаблона
До встречи!
© Михаил Ковеньков
День добрый! Обновил тему F2, чтобы адаптировать для мобильных телефонов. Но предлагаемые три варианта ширины сайдбаров меня не устраивают. Мне надо что-то среднее между первым и вторым вариантом. Где и что в редакторе надо поменять? Подскажите, пожалуйста. Версия 2.2.3 Мой сайт [http://yug-gelendzhik.ru/]
Олег, я попробовал что-то изменить, но у меня ничего не получилось. Изначально я сразу дал ответ и он был правильным для многих тем, но в этой обновлённой теме настройки сайдбаров раскиданы по нескольким файлам CSS и я не стал рисковать делать изменения во всех файлах. К сожалению, на этот раз я не могу вам помочь.