Viewport — фотоблогам и визионерам
Viewport - фотоблогам и визионерам
Тема для Wordpress Viewport, созданная фрилансером Полом Беннетом (Paul Bennett) по заказу авторов замечательного Smashing Magazine, резко выбивается из обычных для этого блога минималистичных тем. Если темы для Wordpress, как правило, отличаются друг от друга визуальным представлением текстового материала, то в данной теме текстового материала нет как такового. То есть, полные версии постов и страницы выглядят похожими на обычные, а титул, страницы рубрик, меток и архивов представляют собой коллекцию изображений с выдержкой поста или страницы. Выглядит очень необычно, свежо. Это один из тех вариантов дизайна, которые «обмусоливаешь» просто так — переходишь от одной страницы к другой в погоне за эстетическим наслаждением.
Тема Viewport выдвигает свои требования к оформлению постов, которые соблюдать необязательно, но желательно. В противном случае, вместо красивого ряда изображений, посетитель будет видеть пустые блоки с заголовком и выдержкой. Но если отнестись к подбору картинок серьезно, то может получиться очень интересный и приятный дизайн. Так как подготавливать несколько последних постов для демонстрации хлопотно, в этот раз, «пощупать» тему вы сможете на блоге автора. Подробности темы и правила оформления ждут вас ниже.
Демонстрация | Скачать русскую версию | Страница оригинала
Характеристика темы Viewport:
- Двухколоночная
- Сайдбар справа
- Поддерживает виджеты
- Стиль: минимализм на страницах постов, визионерство на титуле и в архивах
- Цвета: оттенки серого
- Фоновое изображение или заливка фона цветом настраивается
- Каждому посту необходимо задать три изображения
- В тему интегрирован вывод последних комментариев
- Полностью на русском языке
Дополнительная информация по теме Viewport:
Прежде всего, о том, как происходит добавление изображений к постам, которые посетитель будет видеть на титульной странице, на странице поста и на странице архивов. Хорошо знающие английский могут прочесть это у автора, но на мой взгляд, там несколько неясно описана эта процедура.
- Сначала вы пишете статью.
- Затем подбираете для нее три изображения, которые будут выводиться не в теле поста, а так, как показано в демонстрации темы.
- Изображения должны быть следующих размеров (в пикселях): 940×600 для титульной страницы; 940×300 для страницы поста; 270×172 для страницы архивов.
- После того, как статья написана и изображения правильного размера подобраны, вам нужно будет загрузить их в медиа-библиотеку, получить полный URL изображений, создать в посте произовольные поля, куда адреса изображений вы и вставите. Звучит сложно, но на деле это просто. На этом рисунке выделена кнопка загрузки изображения.
Viewport - загрузка изображений
- После того, как вы нажмете на ней, появиться стандартное окно загрузки картинки. Загружайте сначала изображение размером 940×600 — так вы не запутаетесь. Такие поля, как «Заголовок», «Подпись» и «Описание» заполнять не обязательно, так как использоваться они не будут. Под полем Описание есть поле URL ссылки, а под ним три кнопки «Нет», «URL файла» и «URL записи» (текст кнопок может немного отличаться, в зависимости от версии Wordpress и используемой локализации). Нажмите на кнопке URL файла. В поле URL ссылки появился полный путь к загруженному вами рисунку. Скопируйте его, а изображение не вставляйте в пост — просто нажмите на кнопку «Сохранить» в самом низу этого окошка. Рисунок ниже.
Viewport - копируем полную ссылку на рисунок
- Эту процедуру нужно повторить для каждого изображения. Рисунок размером 940×600 вы только что загрузили, сейчас сделайте то же самое для изображений размерами 940×300 и 270×172, и скопируйте куда-нибудь прямые ссылки на них.
- Теперь взгляните в низ поста. Там есть блок «Произвольные поля», развернув который вы увидите два столбца «Имя» и «Значение», выпадающее меню с произвольными полями, которые уже были созданы вами, и кнопку добавления нового произвольного поля «Добавить новое». Нажмите на ней и в появившееся поле для Имени введите lead_image, а в поле Значение — ссылку на первое изображение размером 940×600, которое вы загрузили. Затем нажмите «Добавить произвольное поле» — это сохранит Имя и Значение вашего нового поля. То, что вы сделали сейчас, создает рисунок для поста на титульной странице.
- Добавьте еще одно произвольное поле с Именем single_image, а в Значение впишите полный адрес рисунка размером 940×300. Это создает рисунок для полной версии поста.
- Добавьте еще одно произвольное поле с Именем archive_image, а в Значение впишите полный адрес рисунка размером 270×172. Это создает рисунок для поста при просмотре рубрик, архивов, меток.
В итоге, у вас получится что-то похожее на это:
Viewport - создание произвольных полей
Это все. В дальнейшем произвольные поля, которые вы добавили никуда не исчезнут, и заполнять их будет проще — выбрать из выпадающего списка Имя поля, указать путь к изображению для него, и сохранить. Важно помнить, что:
- lead_image и изображение 940×600 — для поста на титульной странице
- single_image и изображение 940×300 — для полной версии поста
- archive_image и изображение 270×172 — для поста странице рубрик
Теперь немного по самой теме Viewport.
Если в настройках вашего блока указано, что за раз должно выводиться не более 10 постов, то 10-ый пост будет весьма оригинальным изображением с последними комментариями справа. Страница эта называется «Что дальше?». Если вы используете виджеты, то отображаться они будут не на этом 10-ом слайде, а на странице поста или страницы.
Новые комментарии выводятся собственной функцией темы, подкорректировать которую можно в файле functions.php в строках 11−46.
В строке 11 в файле functions.php в коде function dp_recent_comments($no_comments = 10, $comment_len = 60) { число 10 отвечает за количество комментариев, а 60 — за их длину в символах.
Хотите использовать свой плагин для вывода новых комментариев? Открывайте файл index.php, и в строке 36 код <?php dp_recent_comments(); ?> заменяйте на вызов своего плагина.
После установки темы на закладке Настройки вашего Wordpress'а появиться вкладка Viewport Settings, в которой вы можете:
- Установить изображение на задний фон
- Изменить цвет заливки заднего фона
- Установить изображение, которое будет выводиться на слайде/странице «Что дальше?»
Если вы укажете изображение для заднего фона, а затем решите отказаться от его использования, то просто очистите поле и обновите настройки. Если вы зададите свой цвет заливки заднего фона, а потом захотите вернуться к стандартному, сделать это не получиться — сброса цвета нет. Поэтому, запомните стандартный цвет: #f2f2f2. Что касается изображения для последнего слайда, то лично у меня эта настройка не сработала, поэтому менять этот рисунок пришлось вручную — папка images, файл where.jpg, разрешение 940×600.
Кажется, это все — остальное в этой теме не особенно отличается от других тем.
Viewport, повторюсь, очень необычна, я подобных решений еще не видел, и был бы рад, если бы она стала вашим дизайном. При заполнении произвольных полей, тема действительно дарит новый опыт — информация воспринимается не через текст, а через изображения. Демонстрацию темы я сделал на другой сайт именно поэтому — у меня недостаточно постов с заполненными произвольными полями, чтобы вы могли по достоинству оценить тему.
Если вас интересует вопрос сео-оптимизированности данного дизайна, то он не то, чтобы на высоте. Дело в том, что поисковикам на титульной странице нужны ключевые слова по которым вы хотите занять верхние позиции в выдаче. А в этой теме на титуле они будут только в мета-данных, заголовке и выдержке из поста. Но у блогов не бывает статичной первой страницы — у нас она постоянно меняется и ключевые слова на ней тоже. Блоги, как правило, двигают по низкочастотным запросам ссылками на сами посты. Ну а посты в теме обычные и содержат все необходимое, для вашего триумфа в сео. В общем — не заморачивайтесь, а нравится — используйте.
P/S. Из-за одинаковой строки function mt_add_pages() { add_options_page('Viewport Settings', 'Viewport Settings', 8, __FILE__, 'mt_page'); } эта тема и плагин для внутренней перелинковки Cross-Linker конфликтуют. Использовать сейчас можно только что-то одно, либо нужно изменить эту функцию, если хватает знаний в PHP. Если плагина у вас нет — ставьте Viewport без сомнений.
P/S №2. Благодаря опыту вашего непокорного Сергея М. и любознательности вашего покорного локализатора, проблема совместимости была устранена. Теперь все работает прекрасно.
« Из-за одинаковой строки» — а ты в теме измени немного, чтобы убрать конфликт:
if(!function_exists('mt_add_pages')) { function mt_add_pages() { add_options_page('Viewport Settings', 'Viewport Settings', 8, __FILE__, 'mt_page'); } }Т.е., если этой функции еще не существует, то она подключится.
Единственное, я не понимаю, почему в плагине и теме есть одна и та же функция, которая подключает страницу в Настройки админки. Может, они все-таки разные, только название одинаковое? :) Если так, то лучше в переведенной теме сразу изменить название функции (функция mt_page же не конфликтует!).
function mt_add_pages() { add_management_page('Cross-Linker Plug-In Management', 'Cross-Linker', 8, 'crosslinker', 'cross_linker'); }function mt_add_pages() { add_options_page('Viewport Settings', 'Viewport Settings', 8, __FILE__, 'mt_page'); }Мои убогие познания в программировании говорят, что это — одинаковые функции. Если сделать вызов функции как ты предлагаешь, то тема будет работать, несмотря на вызванную ранее плагином перелинковки функцию, но настроек темы в должном месте не появится. А это тоже косяк, все равно, что не ставить. Автор предложил изменить функцию, не сообщив подробности, и предупредив, что копание без знаний чревато. Спасибо автору за.
Изменить название функции я смогу, если вообще узнаю, где в этих строках название функции=)
Нет, смотри. Первая функция — от плагина, она подключает страницу, находящуюся в функции cross_linker, как подппункт в админском разделе Настройки. Пункт будет называться «Cross-Linker Plug-In Management». Вторая, называющая точно так же, уже в шаблоне темы, подключает туда же (и с тем же приоритетом), но из функции mt_page и с названием «Viewport Settings».
Так что в шаблоне темы надо все-таки изменить само название подключающей функции mt_add_pages, чтобы оно не конфликтовало. Например, так:
function mt_add_options_pages() { add_options_page('Viewport Settings', 'Viewport Settings', 8, __FILE__, 'mt_page'); }После этого надо проверить, нет ли конфликта и добавились ли оба пункта в настройках — и Viewport Settings, и Cross-Linker Plug-In Management (как я понимаю, названия пунктов не переводились)))
Названия пунктов не переводятся принципиально=)
Попробовал изменить как указанно, тема установилась, но настройки не работали. Переименовал еще чего-то — появились, и работают.
Спасибо=)
Аналогичная проблема, за исключением того, что настройки так и не заработали =(
Есть похожая тема называется wpesp-portfolio.
То же исопользует скрипт Coda для прокрутки всех постов на главной странице.
Правда там нет возможности комментирования (или я не разобрался, как это включить)