Меню

Twenty twelve wordpress настройка



Soft Settings

Рубрики

  • Apple (79)
  • HardWare (484)
  • High-Tech (272)
  • IT-Blog (58)
  • Linux (38)
  • Tehno (2 285)
  • Windows (52)
  • Без рубрики (43)
  • Браузер (66)
  • Звук и Акустика (20)
  • Игры (232)
  • Интересно (2 522)
  • ИТ Новости (9 417)
  • Как настроить — Оптимизация (32)
  • Ноутбуки (143)
  • Планшеты (200)
  • Программы (216)
  • Сеть — Сервера (106)
  • Создание сайтов (492)
  • Телефоны (881)
  • Теория (55)

Архив

Twenty Twelve: настраиваем стандартную тему wordpress

Здравствуйте, сегодня попробуем переделать стандартную тему wordpress — Twenty Twelve: зададим размер миниатюре, поместим миниатюру под заголовок, удалим ненужные мета теги на главной странице, отредактируем кнопку “Читать далее”, удалим ссылку в подвале.

Стандартные темы wordpress: Twenty Eleven, Twenty Twelve, Twenty Ten, Twenty Thirteen, Twenty Fourteen – являются отличным framework ( фреймворк , структура, каркас), на основе которых каждый день создаются новые, многофункциональные wordpress темы.

Изначально стандартная тема wordpress — Twenty Twelve (версия 1.3) выглядит так:

Приступим к ее исправлению:

1. Зададим размер миниатюры (thumbnail).

Почему-то размер миниатюры не ограничен – что очень не удобно, так как при загрузке картинок разного размера – миниатюры также будут разными.

Для этого заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редакор”, справа в списке шаблонов выбираем файл functions.php (Функции темы) и ищем в его коде следующую строчку:

Именно она и задает размер миниатюры в теме Twenty Twelve (621 – это ширина, а 9999 – это высота миниатюры в px), давайте например исправим ее на следующую строчку:

И у нас должно получиться следующее:

2. Переместим миниатюру под заголовок.

Для этого заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редакор”, справа в списке шаблонов выбираем файл content.php и ищем в его коде следующую строчку:

Данная сточка отвечает за отображение миниатюры.

Её перенесем чуть ниже за сточку:

Также обернем код вывода миниатюры в отдельный блок и пропишем к нему стили оформления – для того, чтобы сделать отступ от заголовка сверху, в итоге должно получиться следующее:

То есть мы обернули код вывода миниатюры в блок с id “tumba”.

Для блока tumba пропишем следующий код в файле стилей – style.css – открываем его: заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редакор”, справа в списке шаблонов выбираем файл style.css и в самый его низ вставляем следующий код:

То есть мы создали отступ в 30px сверху.

В итоге у нас получиться следующее:

3. Удалим ненужные мета теги.

Опять возвращаемся к файлу content.php – для этого заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редакор”, справа в списке шаблонов выбираем файл content.php и удаляем в нем следующие строчки:

В итоге ваш файл content.php должен выглядеть так:

После чего сайт будет выглядеть уже так:

Как видите ничего лишнего.

4. Отредактируем кнопку “Читать далее”.

Для этого достаточно опять перейти в файл стилей – style.css и добавить в самый низ его кода следующие строчки:

К кнопке “Читать далее” можно также прописать фоновое изображение с помощью следующей сточки:

А для того, чтобы кнопка “Читать далее” отображалась справа, а не слева можно вставить следующий код:

В итоге у нас получилось следующее:

5. Удалим ссылку в подвале.

Для этого заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редакор”, справа в списке шаблонов выбираем файл footer.php и удаляем в нем следующий код:

В итоге файл footer.php будет выглядеть так:

В итоге ссылка на “wordpress.org” – у нас из подвала исчезла.

PS: Скачать переделанную тему Twenty Twelve (версия 1.3) – можете с моего сайта – загрузить Twenty Twelve (исправлена mnogoblog.ru) .

* Для того чтобы вставить код в комментариях используйте теги [php] код [/php]

Источник

Тема Twenty Twelve

Посмотреть демонстрационный сайт

TwentyTwelve – элегантная, понятная и полностью настраиваемая тема, которая отобразит содержание вашего сайта в наилучшем виде на любом устройстве.

Шаблон главной страницы

Ключевой компонент этой темы – специальный шаблон для главной страницы. Этот шаблон подойдет для тщательно продуманной главной страницы. Добавляйте текст, изображения, видео, все, что пожелаете, в верхнюю область, потом настраивайте виджеты, предназначенные только для главной страницы, ниже в одной или двух колонках.

Настраиваемый Mobile-first шаблон

Своим великолепием эта тема обязана элементам дизайна. Благодаря тщательно продуманному mobile-first шаблону, TwentyTwelve предназначена для просмотра на устройствах самых разных размеров, начиная от смартфонов и планшетов и заканчивая последними HiDPI экранами. Независимо от того, как именно ваши читатели решат зайти на ваш сайт, он будет оставаться красивым, удобным и удобочитаемым.

Специальный шрифт “OpenSans”

Представляем роскошный экранный шрифт OpenSans для TwentyTwelve, который повышает привлекательность и удобочитаемость темы.

Форматы записей на всех страницах сайта

Оформление форматов записей остается неизменным в списках и на странице записи. Ссылки, цитаты, заметки, статусы и изображения, которые вы выбираете для форматирования в редакторе записей, отображаются несколько иначе, нежели стандартные записи блогов – и они сохраняют свой уникальный вид на всех страницах сайта.

Виджеты и шаблон без сайдбара

Twenty Twelve, как и вам, нравится вариант сайта без сайдбара. Воспользуйтесь дополнительным шаблоном страницы «Шаблон без боковой колонки», чтобы удалить сайдбар с любой страницы. Хотите еще больше упростить внешний вид сайта и удалить сайдбар из всех записей и страниц? Ваша догадка верна! Просто удалите все активные виджеты из области Основного сайдбара, и сайдбар исчезнет.

Читайте также:  Настройка internet explorer росреестр xml

Настройка

Вы можете настроить дизайн TwentyTwelve в соответствии со своими предпочтениями благодаря своему меню, шапке, изображению и цвету фона.

Краткая спецификация (все размеры приведены в пикселях):

  1. Основная колонка шириной 625, за исключением шаблона в полную ширину, значение которой составляет 960; ширина сайдбара – 250.
  2. Ширина миниатюры – 624 (высота настраиваемая). Эти изображения отображаются в «стандартных» записях; записи без специального формата, такие как изображение, заметка, ссылка или цитата.
  3. Рекомендуемые размеры шапки 960 на 250 (ширина, высота). Тем не менее, оба эти значения настраиваемые, так что вы можете загрузить обрезанное изображение меньшего размера, если захотите. Ширина ограничена размером 2000 пикселей.

Пример сайта на этом шаблоне

(нажмите на картинку для перехода на сайт)

Дополнительная информация по настройке темы:
Меню
Фон
Заголовок

Настройка тем дизайна

В этом видео-ролике описана информация по работе с темами дизайна сайта:
— Общая информация;
— Выбор темы дизайна сайта;
— Как посмотреть демонстрационный сайт-пример темы;
— Особенности и настройки тем: название и описание сайта, цвета темы, изображение заголовка, способ вывода изображений в шапке сайта, фоновое изображение, навигация на сайте, настройка главной страницы сайта, выбор цветовой гаммы темы, выбор количества колонок на сайта;
— Особенности настройки сайта после смены темы.

Источник

MnogoBlog

как создать сайт на wordpress, настроить и оптимизировать wordpress

Twenty Twelve: настраиваем стандартную тему wordpress

Здравствуйте, сегодня попробуем переделать стандартную тему wordpress – Twenty Twelve: зададим размер миниатюре, поместим миниатюру под заголовок, удалим ненужные мета теги на главной странице, отредактируем кнопку “Читать далее”, удалим ссылку в подвале.
Скачать исходники для статьи можно ниже

Стандартные темы wordpress: Twenty Eleven, Twenty Twelve, Twenty Ten, Twenty Thirteen, Twenty Fourteen – являются отличным framework (фреймворк, структура, каркас), на основе которых каждый день создаются новые, многофункциональные wordpress темы.

Изначально стандартная тема wordpress – Twenty Twelve (версия 1.3) выглядит так:

Приступим к ее исправлению:

1. Зададим размер миниатюры (thumbnail).

Почему-то размер миниатюры не ограничен – что очень не удобно, так как при загрузке картинок разного размера – миниатюры также будут разными.

Для этого заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редакор”, справа в списке шаблонов выбираем файл functions.php (Функции темы) и ищем в его коде следующую строчку:

Именно она и задает размер миниатюры в теме Twenty Twelve (621 – это ширина, а 9999 – это высота миниатюры в px), давайте например исправим ее на следующую строчку:

И у нас должно получиться следующее:

2. Переместим миниатюру под заголовок.

Для этого заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редакор”, справа в списке шаблонов выбираем файл content.php и ищем в его коде следующую строчку:

Данная сточка отвечает за отображение миниатюры.

Её перенесем чуть ниже за сточку:

Также обернем код вывода миниатюры в отдельный блок и пропишем к нему стили оформления – для того, чтобы сделать отступ от заголовка сверху, в итоге должно получиться следующее:

То есть мы обернули код вывода миниатюры в блок с id “tumba”.

Для блока tumba пропишем следующий код в файле стилей – style.css – открываем его: заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редакор”, справа в списке шаблонов выбираем файл style.css и в самый его низ вставляем следующий код:

То есть мы создали отступ в 30px сверху.

В итоге у нас получиться следующее:

3. Удалим ненужные мета теги.

Опять возвращаемся к файлу content.php – для этого заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редакор”, справа в списке шаблонов выбираем файл content.php и удаляем в нем следующие строчки:

В итоге ваш файл content.php должен выглядеть так:

После чего сайт будет выглядеть уже так:

Как видите ничего лишнего.

4. Отредактируем кнопку “Читать далее”.

Для этого достаточно опять перейти в файл стилей – style.css и добавить в самый низ его кода следующие строчки:

К кнопке “Читать далее” можно также прописать фоновое изображение с помощью следующей сточки:

А для того, чтобы кнопка “Читать далее” отображалась справа, а не слева можно вставить следующий код:

В итоге у нас получилось следующее:

5. Удалим ссылку в подвале.

Для этого заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл footer.php и удаляем в нем следующий код:

В итоге файл footer.php будет выглядеть так:

В итоге ссылка на “wordpress.org” – у нас из подвала исчезла.

6. Как убрать после поля для комментариев надпись “Можно использовать следующие HTML-теги и атрибуты:…” (You may use these HTML tags and attributes:…)

Читайте также:  Настройка автоматической переадресации в outlook 2010

То есть до изменений форма комментариев выглядит так:

А после удаления данной строки так:

Для этого заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл comments.php и удаляем в нем следующий код (3 строчка снизу):

и вместо него вставляем следующий код:

Можете скачать исправленный файл comments.php с моего сайта – скачать.

7. Добавляем постраничную навигацию.

Устанавливаем плагин WP-PageNavi – он есть в официальном репозитории wordpress, поэтому установка стандартная – через панель управления (админка) wordpress:

Количество скачиваний плагина: 4,938,430 – огромное количество
Страница плагина в репозитории: “wordpress.org/plugins/wp-pagenavi/”

Устанавливаем и активируем плагин WP-PageNavi, но это еще не все, так как его еще нужно привязать к нашей теме, для этого – заходим в файл functions.php темы Twenty Twelve (Админка – пункт “Внешний вид” – подпункт “Редактор” – справа в списке шаблонов находим файл functions.php), после чего ищем в его коде следующие строчки:

И заменяем их на следующие:

Все после этого наша постраничная навигация заработает!

8. Перемещаем сайдбар справа налево.

Для этого вам достаточно добавить в файл стилей – style.css следующий код:

9. Добавляем разбивку комментариев на страницы.

Если у вас скопилось уже достаточно много комментариев на странице, то можно добавить постраничную навигацию для комментариев и в этом нам поможет следующий плагин:

WP-CommentNavi
Последнее обновление: 2014-12-19
Количество загрузок: 46000+
Страница плагина: “wordpress.org/plugins/wp-commentnavi/”
Или же можете скачать данный плагин с моего сайта – скачать WP-CommentNavi.

Добавляет в комментариях пагинацию, то есть разбивает комментарии на страницы.

Здесь понадобиться небольшая настройка…
Возьмем для примера стандартную тему wordpress – Twenty Twelve (скачать можно здесь), а версия движка wordpress на примере будет 4.1.

9.1. Устанавливаем и активируем плагин WP-CommentNavi через панель управления wordpress: Админка – Пункт “Плагины” – подпункт “Добавить новый” – в строку “Поиск плагинов” вводим WP-CommentNavi.

9.2. После установки плагина в пункте “Настройки” вашей панели управления появиться новый подпункт “CommentNavi”, изначально, количество отображаемых комментариев стоит равное 5:

9.3. Далее идем в пункт “Настройки” и меняем количество комментариев, отображаемых на странице.
Заходим в админке в пункт “Настройки” – подпункт “Обсуждение”, изначально настройки выглядят так:

Здесь вам нужно поставить галочку напротив пункта:
“Разбивать комментарии верхнего уровня на страницы по…” и уменьшить количество с 50 штук до 5 штук:

Здесь же можно изменить какая страница будет отображаться (последняя или первая), а также ранние или поздние комментарии будут располагаться сверху.

9.4. Теперь отредактируем немного тему Twenty Twelve, чтобы у нас появилась разбивка комментариев на страницы.

Для этого заходим в пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем – comments.php (файл, который отвечает за вывод комментариев в теме Twenty Twelve):

В открывшемся коде файла comments.php находим вот такие строчки:

Этот код заключен в теги “nav” и он отвечает за вывод стандартной навигации комментариев в теме Twenty Twelve.

Удаляем вышеуказанные строчки кода, заключенные в теги “nav” и вместо него вставляем следующий код:

Вот код после изменения:

После чего заходим на сайт и смотрим – что получилось:

10. Вопрос Александра: “В актуальной на данный момент версии 1.6 темы Twenty Twelve ссылка “добавить комментарий” находится над миниатюрой.Пожалуйста расскажите как переместить ее под запись,расположив в одном ряду с метатегами. Спасибо”

Для чтобы перенести ссылку “добавить комментарий” заходим в админку wordpress, выбираем в меню пункт “Внешний вид”, подпункт “Редактор”, справа в списке шаблонов выбираем файл content.php и с помощью поиска браузера находим leave-reply:

Здесь видим, что за ссылку отвечает код:

Можно вовсе удалить данный код, чтобы ссылка “Добавить комментарий” пропала.
Если же вы хотите перенести ее в ниже в мета-теги, то нужно найти чуть ниже код:

И сразу после него вставить код ссылки “Добавить комментарий”, вот так:

В итоге у вас получиться следующее:

11. Переносим главное меню под изображение заголовка (картинку в шапке).

Заходим в админку wordpress, в левом меню выбираем пункт “Внешний вид”, подпункт “Редактор”, справа в списке шаблонов выбираем файл header.php, далее находим в нем код, отвечающий за вывод главного меню:

Вырезаем его и переносим под код вывода изображения заголовка.

За вывод изображения заголовка отвечает следующий код:

В итоге должно получиться так:

12. Редактируем отступы в теме Twenty Twelve:

Вопрос: как управлять отступами между анонсами постов на странице? После удаления мета осталось лишнее место…

Чтобы редактировать отступы – можно воспользоваться инструментами для разработчиков, встроенными во все современные браузеры. Так, например, в Яндекс.Браузере и Google Chrome, чтобы вызвать данные инструменты нужно нажать правой клавишей мыши на странице сайта и выбрать в выпадающем списке пункт “Посмотреть код элемента”:

У вас появиться окошко “Developer Tools” (“Инструменты разработчика”), здесь выбираем инструмент “лупа” (слева вверху), далее наводим на нужный нам элемент и смотрим его код – его можно редактировать и смотреть, что измениться (по скриншоту ниже можно кликнуть, чтобы увеличить):

В итоге видим, что за отступы отвечает класс “.site-content article”.

Далее заходим в админку wordpress, выбираем в меню пункт “Внешний вид”, его подпункт “Редактор”, справа в списке файлов откроется файл стилей (style.css), здесь нам и нужно найти данный класс.
Для поиска нужного кода можно воспользоваться функцией поиска, встроенной в браузер, например, для Яндекс.Браузера можно нажать сочетание клавиш Ctrl+F или зайти в меню (Пункт “Дополнительно” и подпункт “Найти…”), в строку поиска вводим, например: класс (site-content article) или же непосредственно код отступа, который ищем (margin-bottom: 5.142857143rem;).

Читайте также:  Настройка внешнего статического ip

В нашем случае за отступ отвечает следующий код:

Нам важны свойства margin-bottom и padding-bottom – здесь они заданы в двух единицах измерения – в “px” и в “rem”, чем они отличаются?

“px” – это абсолютная единица измерения, а “em” – относительная.
“rem” — размер относительно базового (определённого в .html<>) размера шрифта. По идее должен быть дружелюбнее к мобильным устройствами и ресайзу.
По единицам измерения можно почитать статью тут:
“web-standards.ru/articles/boring-bits-of-css/”

По умолчанию, если ничего не делать, 1rem = 16px.

После корректировки отступа мне понравился вот этот вариант:

PS: Скачать переделанную тему Twenty Twelve (версия 1.3) – можете с моего сайта – загрузить Twenty Twelve (исправлена mnogoblog.ru).

Похожие записи:

Twenty Twelve: настраиваем стандартную тему wordpress : 33 комментария

Добрый день! А не подскажите как оптимизировать теги h1 т.к их количество увеличивается с размещением каждой новой статьи а так же как ссделать что бы на главной странице был аноyс а не полностью статьи?

Спасибо за пост, много полезного узнал.

Это чертовски полезная статья!! Наконец-то довел свой шаблон до ума.

Узнать бы еще, как убрать после поле для комментариев надпись “Можно использовать следующие HTML-теги и атрибуты:

Всеволод Ли, спасибо за комментарий, добавил в статье пункт 6, который описывает решение данной проблемы!

А как сделать чтобы отображалось название рубрики на странице записи, просто когда я удаляю по вашей рекомендации мета данные, то нет названий рубрики не на странице “рубрики” не на странице самого поста.

Artem, для вывода категорий воспользуйтесь следующим тегом:

Более подробно читайте тут:
“codex.wordpress.org/Теги_шаблонов/the_category”

Здравствуйте. Очень полезный материал. Но у меня вопрос: как в этой теме в рубриках вообще убрать ссылку “читать далее”? Чтобы в запись можно было перейти только через ссылку в заголовке анонса?

Сергей, чтобы убрать ссылку “читать далее”, достаточно в файле стилей (style.css) добавить следующий код:

Хорошая статья. Я бы ещё добавил описание как сайдбар налево переместить, или сделать два по бокам от контента.

Владимир, спасибо за полезный совет – добавил пункт 8 – о том как переместить сайдбар слева направо.
По созданию двух сайдбаров по бокам – придется написать новую статью…

О том как создать дочернюю тему для Twenty Twelve без доступа к ftp читайте здесь: https://mnogoblog.ru/kak-sozdat-papku-s-pomoshhyu-php

День добрый! А подскажите статья два сайдбара слева и справа – не появилась? Очень большое желание ознакомиться. Заранее спасибо!

как уменьшить ширину шаблона Twenty Twelve

спасибо за описание как удалить ссылку с подвала на вордпресс орг.

Спасибо за полезную информацию. А как сделать чтобы текст обтекал миниатюру с правой стороны?

По сравнению с остальными вопросами, мой достаточно глупый)
Но, как установить Вашу переделанную тему? Выдается ошибка, по причине уже имеющийся темы. менял название, все равно выдает ошибку.

Здравствуйте! Подскажите пожалуйста, а как можно в данной теме переместить окошко и кнопку “поиск” из сайтбара в строку “меню” (так, как сделано у вас)?
Заранее спасибо.

Здравствуйте.
Статья зачетная. Может вы знаете, как в этой теме шапку переместить над меню?
Был бы очень признателен.

Здравствуйте!
Помогите пожалуйста удалить ссылку “изменить” внизу страницы в теме Twenty Thirteen, а также поднять повыше контент с изображением фото на странице в той же теме. Заранее спасибо.

В актуальной на данный момент версии 1.6 темы Twenty Twelve ссылка “добавить комментарий” находится над миниатюрой.Пожалуйста расскажите как переместить ее под запись,расположив в одном ряду с метатегами.Спасибо

Александр, ответил на вас вопрос в пункте 10.

Здрасти!
Подскажите как меню – главная, все статьи, сделать под шапкой (картинкой).
Тема TwentyTwelve 1.6

Pavel, ответ на ваш вопрос находиться в пункте 11 данной статьи, спасибо за вопрос!

Отличная статья, спасибо! Вопрос есть: как управлять отступами между анонсами постов на странице? После удаления мета осталось лишнее место…
Заранее спасибо!

Ксения, спасибо за вопрос, ответил на него в новом пункте 12 данной статьи!

Премного благодарен!
Подскажите как на второй странице: 1-Главная, 2-Видеоуроки, выводить 5 записей?

Здравствуйте , Константин!
Очень полезная для меня информация . Удачно зашел .
Не подскажите как сделать меню во всю страницу (по длине)?
И может подскажите как переместить ,заголовок сайта (текст) ,в правую часть ? Как правильно это все прописать и куда ?
Заранее спасибо , Михаил .

Спасибо за статью! Подскажите, пожалуйста, как уменьшить межстрочный интервал в теме?

Спасибо большое за информацию. Скажите , а как сделать чтобы сайтбар оставался на месте, и информация прокручивалась ?

Сергей, возможно подойдут следующие варианты:
1. Плагин Q2W3 Fixed Widget – фиксирует фиджеты:
“wordpress.org/plugins/q2w3-fixed-widget/”
2. Можно попробовать создать полосу прокрутки для контента – плагина jQuery slimScroll scrollbar:
https://mnogoblog.ru/dobavlyaem-k-bloku-polosu-prokrutki-jquery-plagin

Доброго времени Константин! Статья очень полезная большое спасибо. У меня на сайте установлена форма обратной связи собранная на основе плагина cformsII. Подскажите как вставить в нее капчу, как у вас.

как увеличить ширину контента в теме twenty twelve

Источник

Adblock
detector