Как сделать две колонки wordpress

Верстка страниц. Две и три колонки

Две колонки

Две колонки, резиновый

Свойство float принимает одно из трех значений: left, right или none. Это свойство, примененное к тегу

На рисунке ниже показаны эти два css-свойства в действии:

Здесь блок #left перемещен к левому краю. У него есть фиксированная ширина, однако у главного содержимого #content ее нет, что делает этот дизайн резиновым. Главный раздел страницы просто расширяется, заполняя окно браузера.

Давайте немного улучшим шаблон и добавим отступы:

Элемент #left по высоте меньше элемента #content, но мы можем это исправить, добавив в разметку еще один элемент

Две колонки, фиксированный

Ограничим шаблон по ширине и зададим выравнивание по центру, для этого добавим еще один элемент

Совместим достоинства фиксированной и резиновой верстки:

Аналогично создаем шаблон с двумя колонками, где блок #right перемещен к правому краю:

Три колонки

Три колонки, фиксированный

Теперь создадим шаблон с тремя колонками:

Три колонки, фиксированный, контент сверху

С точки зрения SEO основной контент должен быть ближе к началу страницы, чем вспомогательный контент боковых колонок. Давайте посмотрим, как это можно сделать:

Добавим отступы и выравнивание колонок по высоте:

Три колонки, фиксированный, контент сверху

Как видите, левое поле элемента

Если боковое меню имеет границы, их тоже надо учитывать.

Теперь о том, как рассчитать величину отрицательного margin-left для элемента

Давайте немного улучшим наш шаблон — добавим отступы и выравнивание колонок по высоте с помощью background-image:

Три колонки, резиновый, контент сверху

Добавим отступы и выравнивание колонок по высоте:

Источник

Администратор WordPress

Блог про WordPress

Добавляем боковую колонку для главной страницы в WordPress

Бывает случаи, что боковая колонка на главной странице сайта должна отличаться от боковой колонки на внутренних страницах по содержанию, а иногда и по форме. В некоторых темах и шаблонах разработчики предусмотрели возможность выбора виджетов именно для главной страницы сайта, разметив область сайдбара. Но такая возможность встречается не во всех шаблонах, поэтому, если вы не нашли ее у себя, то не стоит отчаиваться и менять свой шаблон, боковую колонку для главной страницы вы можете создать очень легко, не затратив для этого много времени, просто нужно зарегистрировать новую боковую колонку и назначить ее вывод на главной странице. Первым делом, что вы должны сделать – это открыть файл functions.php вашего шаблона. В большинстве случаев, именно в нем регистрируются все боковые колонки вашего шаблона. Открыв файл, найдите в нем код, отвечающий за регистрацию боковой колонки в сайдбаре. Примерно, он будет выглядеть так:

Этот код, по-умолчанию, создает в вашем шаблоне боковую колонку под виджеты, видеть которую вы можете в разделе “Виджеты” административной панели. После регистрации боковая колонка по-умолчанию в вашем шаблоне, как правило имеет название “Боковая колонка 1″ или “Сайдбар 1″. Теперь давайте зарегистрируем новую колонку для главной страницы и назовем ее, например, “Сайдбар главной страницы”, а также присвоим ей некий идентификатор, который потребуется нам для вывода этой колонки именно на главной странице.

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

Как видите, мы добавили имя нашей новой боковой колонке “Сайдбар главной страницы” и идентификатор “homepage-sidebar”. Теперь, если вы перейдете в меню виджетов в административной панели, то увидите, что у нас появилась новая зарегистрированная колонка. Вот только, добавив в нее свои виджеты, вы не увидите никаких изменений на главной странице. А все потому, что мы пока что зарегистрировали новую боковую колонку, назначили ей имя и идентификатор, но не задали ей условия отображаться только на главной странице сайта. Вот теперь пришел черед назначить ей то самое условие, без которого новая боковая колонка на главной странице сайта не появится. Для этого откройте файл в шаблоне, который отвечает за вывод главной страницы, как правило, это файлы index.php или home.php. В WordPress боковая колонка подключается функцией get_sidebar(), поэтому найдите именно ее и замените на следующий код с условием:

Источник

Русские WordPress темы и шаблоны

Быстрый выбор шаблона

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

Чтобы главная страница выглядела как на скрине, нужно:
1 — Создать страницу и задать для нее шаблон «Home Widget Builder»
2 — Задаем ранее созданную страницу для вывода на главной. Настройки>> Чтение >>На главной странице отображать>>Выберем нашу страницу.
3 — Добавляем виджеты FT для областей Home.

Mediquip Plus яркая и приятная тема для медицинского сайта или сайта схожей тематики. Шаблон выполненный в минималистическом стиле, с минимальным содержанием графики, но при этом содержит лишь самое нужное. При установке шаблона необходимо его настроить. Настройки находятся в админке вашего Вордпресса.

Rodster — прекрасный шаблон, если вы ищете что-то более нейтральное. Автомобили вообще достаточно широкая тема — они смотрятся не только сами по себе, но и как символ скорости и целеустремлённости. В шапке сайта удобно расположились два меню, а кроме того есть возможность оформить RSS-ленту. Шаблон совместим с большим количеством популярных интернет-браузеров.

Palatino — ещё одна тема, разработанная NewWpThemes, которые уже подарии нам немало прекрасных шаблонов. Дизайн чрезвычайно стильный — тёмные тона, полосатый фон и резкие всплески красок в меню, мелкие детали которого подчёркнуты ярким оранжевым. Совместим с большинством современных браузеров и последними версиями WordPress.

Nico — шаблон премиум-класса, разработкой которого занималась достаточно именитая команда. Стильный и необычный, он отлично подойдёт как для персонального блога, так и для сайта, посвящённого кулинарному искусству. В шаблоне реализованы две колонки, сайдбар с ассортиментом виджетов и даже слайдер наиболее актуальных записей.

Navly — необычный тёмный шаблон, который моментально врезается в память. Две широкие колонки с удобным сайдбаром, который поддерживает виджеты, а также слайдер популярных записей делают навигацию предельно простой и прозрачной. Контрастный шрифт белого цвета хорошо смотрится на тёмном фоне. Такой шаблон можно использовать для новостного сайта или для сайта про автомобили.

Modern Blogger — идеальный шаблон, который подойдёт блогу абсолютно любой тематики. Оформление очень необычное с яркой цветовой гаммой, что несомненно привлечёт типичную для блогов аудиторию — современную продвинутую молодёжь. Нельзя рассчитывать, что такие люди будут использовать только одну операционную систему и один браузер, так что шаблон оптимизирован под самые разные конфигурации.

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

Kis — один из самых простых шаблонов, которые только можно найти в интернете. Благодаря минималистскому дизайну и широкому функционалу, он прекрасно подойдёт для сайта практически любой тематики. Оборудован двумя достаточно широкими колонками, одна из которых предназначена для комфортабельной навигации. Кроме того, шаблон оборудован поиском.

Тематика шаблонов

О нашем сайте

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

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

Обращаем внимание на то, что все темы и шаблоны WordPress можно скачать с сайта без регистрации и только по прямым ссылкам! Также имеется доступный предпросмотр выбранной темы и шаблоны Вордпресс. Для этого достаточно всего лищь кликнуть на кнопку просмотра, расположенную под описанием.

Мы вложили силы и свою энергию в данный ресурс и надеемся, что наши усилия не оказались безуспешными, а ваш сайт на Вордпресс обретет уникальное и элегантное облачение, и станет яркой звездой в сети Internet!

Источник

WordPress. Как расположить посты в несколько колонок.

Здравствуйте читатели.
Хотел написать статью с пачкой хаков, функций и процедур, помогающих изменять вывод постов на главной, в рубриках и архиве. Но понял, что у такого поста будет совсем не поисковый заголовок, поэтому я лучше выпущу пачку небольших статей, но с нормальными заголовками.

И начну с самого «заметного» кода. Как расположить несколько постов рядом, а не в столбик.

На самом деле все очень просто, когда знаешь, куда воткнуть эти три строчки. Но ведь в том-то и загвоздка, что надо знать что и куда.

Сначала коротко, для тех, кто итак все знает:
Для верстки в несколько колонок достаточно каждый пост заключить в теги

Где 250 это ширина колонки. Так же можно подумать над выводом сразу двух постов в блоке, чтобы между верхним и нижним не было разрывов. Но это сами. ))

И не забудьте после завершения цикла воткнуть

чтобы отменить float:left;

Для тех, кто знает чуть меньше, буду рассказывать по-порядку.
1) Находим файл отвечающий за вывод постов. Это обычно index.php для главной, arhive.php для архивов, category.php для рубрик. Если какого-то из файлов нет, то обычно его заменяет все тот же index.php

Универсальным способом найти нужный файл является поиск нужного кода. Цикл вывода постов начинается с кода:

его и ищите.
Когда нашли эту строку, то ищем ниже строчку

Убедитесь, что она относится именно к нужному циклу, а не к другому. Хотя обычно других циклов в файле все равно нет. Рядом с этими строчками мы и будем работать.

Итак сразу после открытия цикла пишем

Параметры width, margin, padding и border вы будете подгонять под свои вкусы. Однако смысл их я, конечно, объясню.
margin задает отступы ВОКРУГ блока, тем самым увеличивая занимаемое им место. Параметры задаются по часовой стрелке. Верх, право, низ, лево. Есть разные записи этого параметра, я описал только самую понятную.
padding задает отступы ВНУТРИ блока. Порядок сторон тот же.
width это собственно ширина блока. Однако считать надо в сумме с вторым и четвертым параметрами margin. Сумма значения должна несколько раз умещаться в ширину родительского блока. Если вы не можете узнать ширину родительского блока, то просто угадайте ее методом подбора, меняя параметр width нашего блока.
border это рамка для красивости. Толщина, тип и цвет. Если рамка не нужна эту часть можно просто удалить.

Но это не все.
Обязательно закройте тэг, вставив строчку

перед концом цикла.

Не забывайте учитывать языки и если после кода php нет закрывающего тега

, то поставьте его сами, но опять откройте после вашей вставки.

__
По-мойму клевый пост вышел. Мне самому несколько раз его очень не хватало.
Еще два будут про вывод картинки и про обрезку текста.

Источник

Настройка столбцов в панели администрирования WordPress

Мотивационный пример использования

Представьте себе, что вам поручено создать или управлять сайтом, содержащим портфолио агентства недвижимости. На этом сайте размещены изображения, адреса, местоположения, информацию о количестве комнат и других параметрах объектов недвижимости.

В панели администрирования вы управляете портфолио, добавляете, удаляете и редактируете существующие объекты. По умолчанию столбцы WordPress (название, автор, дата публикации, количество комментариев) вряд ли соответствуют направлению сайта, и вас больше интересует просмотр изображений и информации об объектах в целом.

Давайте посмотрим на стандартную панель администрирования для пользовательских типов записей:

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

Теперь гораздо проще найти, просмотреть и отредактировать содержимое.

Управление столбцами с помощью кода

Сначала мы рассмотрим управление столбцами панели администрирования: добавление столбцов, специфичных для вашего контента, удаление устаревших столбцов и изменение их порядка. Для этой цели WordPress предлагает API столбцов. Он также доступен для пользователей и таксономий, но мы рассмотрим раздел записей.

«Где я могу разместить свой код?»

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

Все фрагменты кода, которые мы предоставим в рамках этой статьи, войдут в пользовательский плагин.

Добавление, удаление и реорганизация столбцов

Первый хук для управления столбцами ( manage_posts_columns ) — это фильтр, который обрабатывает массив столбцов. Стандартный массив фильтров для обзора записей:

Мы хотим удалить несколько столбцов из этого списка, а также добавить новые. Для этого нужно разместить обратный вызов фильтра manage_posts_columns и вставить настраиваемые столбцы в массив столбцов.

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

Мы добавили столбцы для отображения изображения, цены и площади, а также возвращаемый массив с новыми столбцами. Полученный в результате список объектов выглядит следующим образом:

Кроме этого нам нужно:

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

Наша новая панель обзора объектов недвижимости начинает формироваться: ненужные столбцы были удалены, а новые добавлены на необходимые позиции.

Заполнение столбцов

Начнем с добавления столбца « Image «.

Следующий столбец площади. За исключением единиц измерения (квадратные метры, вместо долларов), код почти идентичен:

На странице обзора объектов недвижимости теперь содержится вся необходимая информация, которую нужно отобразить:

Теперь добавим функции сортировки столбцов.

Сортировка столбцов

Создание сортировки столбцов реализуется в WordPress просто, но она редко используется для пользовательских столбцов. Сортировка помогает организовать контент и быстро его находить. Например, мы могли бы отсортировать строки нашего обзора объектов недвижимости по цене, а затем найти самые дешевые и дорогие объекты.

Начнем с добавления столбца «price» в список сортируемых столбцов:

Этот код подключается к фильтру manage_edit-realestate_sortable_columns и добавляет smashing_realestate_sortable_columns в качестве функции обратного вызова (строка 1).

Строки 1 и 2 добавляют функцию обратного вызова к действию и запускают определение функции обратного вызова. Строка 3 проверяет, находимся ли мы в панели администрирования, и является ли запрос основным запросом записей (дополнительную информацию можно найти в Кодексе ). Если нет, не будем изменять запрос.

В результате мы получаем сортируемый столбец цены:

Управление столбцами с помощью плагина Admin Columns

Плагин поддерживает более 150 типов столбцов. Он поставляется с полями, в которых можно настроить название и поведение столбца. В этой части статьи мы покажем, как настроить столбцы панели администрирования, чтобы создать тот же раздел, который разработали ранее.

Установите и активируйте плагин. Затем перейдите на страницу «Настройки столбцов».

Добавление, удаление и реорганизация столбцов

Почистим раздел, удалив столбцы, которые не нужны:

Admin Columns предоставляет параметры для настройки отображения столбцов. Здесь же предлагается указать размеры изображения. Позже мы увидим, что при выборе другого типа столбца плагин отображает другие связанные параметры. Для этих параметров Admin Columns пытается предоставить разумные значения по умолчанию.

Admin Columns позволяют сортировать столбцы, просто перетаскивая их. Теперь панель обзора объектов недвижимости выглядит следующим образом:

В приведенной ниже анимации показан процесс добавления столбцов «Area» и «Price» :

Сортировка и фильтрация с помощью плагина Admin Columns

Сортировка отображает контент в определенном порядке в зависимости от значения столбца. Это подходит для быстрого просмотра и анализа контента. Например, с помощью данного функционала можно увидеть, какие записи используют шаблон страницы. А также упорядочить их в алфавитном порядке.

В блоге это помогает узнать, какие пользователи создали наибольшее количество записей, сортируя пользователей по числу опубликованных ими записей.

Фильтрация помогает быстрее находить контент. Вы можете фильтровать столбцы по значению, в пределах диапазона (для числовых столбцов) или без какого-либо значения. Например, можно найти товары, представленные в интернет-магазине в определенном ценовом диапазоне, записи, для которых отсутствует изображение или пользовательское поле.

Рассмотрим простой пример: нужно найти дома с самой большой площадью. Это займет всего несколько секунд, потому что мы можем отсортировать объекты недвижимости по столбцу «Area» :

Пойдем еще дальше и добавим фильтр: найдем 10 домов с наибольшей площадью и с арендной платой в диапазоне от 300 до 500 долларов.

Редактирование с помощью Admin Columns

В панели обзора объектов недвижимости теперь отображается вся необходимая информация. Но чего-то не хватает: для редактирования контента нужно перейти на страницу редактирования, найти поля отредактировать их, нажать «Обновить».

Что, если бы мы могли выполнить эти же действия в три простых шага: кликнуть, отредактировать, сохранить? С помощью плагина Admin Columns Pro это возможно.

На скриншоте, приведенном выше, показан режим прямого редактирования названия свойства. Он доступен для всех пользовательских столбцов. С помощью плагина Admin Columns Pro активировать редактирование можно прямо в панели настройки столбцов. Он автоматически определяет тип контента и изменяет его соответствующим образом. Например, для изображений появится медиа-галерея.

В результате в панель обзора объектов недвижимости добавляются иконки редактирования для всех ячеек, Просто кликнув, отредактировав и сохранив, можно обновить наш контент. Как это реализуется на практике: мы включили прямое редактирование для всех пользовательских столбцов, и теперь используем этот функционал для быстрого обновления контента:

Изменения сохраняются мгновенно. Если что-то пойдет не так, для быстрого отката есть кнопка отмены.

Заключение

Плагин Admin Columns может еще много чего крутого, но в этой статье недостаточно места. Почему бы вам самим не попробовать некоторые из удивительных возможностей этого плагина?

Источник