ГлавнаяТемыНовая журнальная тема Semicolon от WP Magazine

Новая журнальная тема Semicolon от WP Magazine

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

Журнальная тема Semicolon от WP Magazine

Журнальная тема Semicolon от WP Magazine

Журнальная тема Semicolon разработана специально для журнала WP Magazine и основана на стартовой теме Underscores. Простой светлый дизайн, крупные легко-читаемые шрифты, социальные иконки в меню, три раздела для виджетов и вполне уникальная поддержка миниатюр и выделения записей.

Некоторые аспекты темы еще находятся в стадии доработки, например адаптивность темы, вертикальный ритм, поддержка в браузерах Internet Explorer и другое. Релиз в директорию WordPress.org ожидается в середине года, а читатели журнала WP Magazine уже сегодня могут опробовать бета-версию.

Если вы обнаружили ошибку при тестировании темы Semicolon, просим оставить комментарий или сообщить о ней по адресу wpmagru@gmail.com.

Константин Ковшенин

Сооснователь журнала WP Magazine и первой конференции WordCamp в России. Разработчик в компании Automattic, принимает активное участие в развитии ядра WordPress. Любимый язык программирования: Python.

Подписаться на рассылку

Подписаться → Подпишитесь на бесплатную рассылку журнала WP Magazine и получайте новости, события, подборки тем и плагинов, уроки, советы и многое другое в мире WordPress!

  • Anatoly Yumashev

    Круто!
    Секция «Читайте также» как сделана? Шаблоном? Хуком the_content?

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

      • art_gud

        у меня проблема возникла с этой секцией. При активации YARPP секция просто перестала работать, зависли одни и те же записи на всех страницах. Как должен проходить процесс интеграции темы и плагина? Может нужно сделать что-то помимо того, чтобы активировать плагин и выставить в нем базовые настройки (пороги похожести и т.д.)

        • Ничего делать не надо, тема сама воспользуется функциями YARPP для вывода схожих записей, если плагин доступен.

          • art_gud

            хм, почему ж тогда подвисло? ладненько, буду пробовать) тема отличная, поведенческие выросли в разы, что не может не радовать. с нетерпением буду ждать релиза в оф директории с поправкой сайдбара) кстати, как в теме можно править коды (и css и html), чтобы они не слетели при обновлении темы?

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

          • art_gud

            тогда будем запоминать, что меняли))

          • art_gud

            Все перепробовал. Вроде б то все начало работать, но всегда отображается 3 похожих записи (порог похожести 2, рассматриваются все параметры — все настройки менял, не помогает)

  • Sergey Silaev

    Молодцы! Я уверен, что после публикации, данная тема будет иметь огромный успех :)

  • art_gud

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

    • art_gud

      а вы будете вшивать в тему хлебные крошки или другой дополнительный функционал или это уже делать сейчас самому?

      • Хлебных крошек пока в планах нет, то мы можем добавить для этого фильтр или событие.

        • art_gud

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

          • Спасибо! Выделить записи можно прилепив их на главную (раздел «видимость» в блоке «опубликовать») или с помощью модуля Featured Content плагина Jetpack — там можно выбрать тег и все записи под этим тегом автоматически становятся выделенными.

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

            Блок с популярными записями это виджет от Jetpack, он сам выводит миниатюры.

          • art_gud

            Спасибо! Буду тестить дальше.

  • art_gud

    Конечно, с точки зрения СЕО-оптимизации не очень получается — на каждой странице вагон тегов Н1, что, вероятно, следствие верстки на html5. Также заметил один момент: если отметить статью прикрепленной, чтобы выводились большие превью, то это самое превью выводится не совсем корректно — картинка меньше самого блока превью и виден серый фон по бокам, но это возможно из-за маленького исходного изображения, хотя тестировалась ширина 600px. Возможно, если сгенерировать новые миниатюры, то проблема исчезнет, Пока не тестил.

    • Поисковые системы уже давно начали понимать разметку HTML5, даже в стандартной теме Twenty Fourteen используется этот же подход :)

      По поводу миниатюр — да, их необходимо перегенерировать, или генерировать «на лету» такими средствами, как например Photon от Jetpack.

      • art_gud

        Извините за невежество, просто пока работал со старыми шаблонами и особо с html5 дел не имел.

      • у меня тоже не все миниатюры правильно встают, хотя пользуюсь Jetpack.

        • Если у вас все еще возникают проблемы с миниатюрами, напишите нам адрес вашего сайта на wpmagru@gmail.com и мы постараемся выяснить в чем дело.

          • Проблемыыыыы! Ничего не пойму, как это «генерировать «на лету» такими средствами, как например Photon от Jetpack.» ?

  • Это шаблон страницы в нашей дочерней теме. Обычная HTML форма, обычный PHP обработчик. Связь с MailChimp осуществляется с помощью их простого API и wp_remote_post(), а почта отправляется простым wp_mail(), который отправляет письмо в очередь Postfix на сервере. Все остальное — простая игра с заголовками письма :)

  • Нет, речь идет о плагине Jetpack и о его модуле Featured Content.

    • sashic

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

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

  • алина

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

    • Алина, спасибо! Платной тема точно не будет. План выложить ее бесплатно в директорию WordPress.org в середине этого года. Мы уже проделывали такой эксперимент с нашей предыдущей темой Expound.

      • тогда вопросы.
        надо поставить логотип в шапку — это можно как то реализовать?

        • Это можно реализовать с помощью CSS. Вы можете воспользоваться инспектором в Google Chrome, чтобы посмотреть как это реализовано у нас на сайте.

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

          • Запросто:

            .site-title a {
            background: url(«http://example.org/image.png») 0 0 no-repeat;
            text-indent: -15000px;
            display: inline-block;
            width: 224px;
            height: 75px;
            margin-bottom: 9px;
            }

            Естественно у вас будут собственные значения для ширины, высоты и URL к логотипу.

          • спасибо огроменное

          • по другому немного, но сделала. Могу скинуть в личку адрес сайта, если интересно посмотреть что вышло )

        • Serg Bakumov

          присоединяюсь к вопросу

      • и еще вопрос — на тестовый сайт тема встала просто идеально, а на рабочий не встал блог — редактировать стиль и нет в настройках блока избранное, вследствие чего главную страницу невозможно визуально редактировать, чтобы были превью больше
        не подскажете из-за чего так могло произойти?

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

          • я уже разобралась, спасибо. не был подключен один из модулей этого плагина.
            а насчет прилепления — не очень удобный способ, учитывая, что в день постов 5 публикуется, и всегда вверху видеть не хочется одни и те же посты

  • Василий

    http://planet.wpmag.ru/

    Здравствуйте, понимаю, что не совсем в тему. На «Планете» собственный агрегатор RSS или вы используете какой-то уже готовый плагин/скрипт?

    • Мы посмотрели несколько плагинов для агрегации RSS лент, но в конечном итоге решили написать свой собственный. Сложного ничего нет, вам понадобится лишь встроенная функция fetch_feed() и запуск по запланированному заданию WP_Cron.

  • Ждал, рад, буду пробовать, спасибо!

  • Блин, а чего так сложно-то с превьюшками на главной (увеличенные)? я наверное никогда не пойму как это настроить.

    • Это не сложнее любой другой темы, например в Expound записи выделялись точно таким же способом. Главное отличие это тот алгоритм, по которому они отображаются, например если три превюшки в ряд маленькие, то четвертая будет тоже маленькая, несмотря на то, что она может быть выделена :)

  • iamopposite

    в 12-й Опере, если браузер открыт не во весь экран, то левого сайдбара нет

    • Это в любом браузере, который поддерживает медиа запросы. Мы пока еще не придумали что с сайдбаром делать на узких экранах.

      • art_gud

        Я думал для адаптивных тем решение одно — когда экран сжимается до определенного размера, сайтбар уходит под основное содержание. Разве не так?

        • Не всегда :) раздел с виджетами можно убрать в подвал, можно спрятать в всплывающий блок (как например меню), можно совсем убрать, можно заменить другим разделом для виджетов и т.д.

          • art_gud

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

  • Павел

    Классная тема! Возможна ли реализация бесконечной прокрутки на ней?

    • Пока нет, но думаю перед выпуском добавим.

  • И еще вопросы. а) Как сделать описание сайта (под меню, типа «WP Magazine — это онлайн журнал посвящённый…»? б) Можно ли вывести миниатюру перед записью на странице записи? Или это не предусмотрено в этой теме?

    • Вывод миниатюр на одиночных страниц темой не предусмотрено, но при желании вы можете сделать это с помощью дочерней темы.

  • Спасибо за красивую и лаконичную тему. Вопросы про Social menu: а) У меня на сайте не выводится иконка VKontakte (на вашем — все нормально). б) Можно вывести иконку skype, если указать адрес сайта скайп.ком, но хотелось бы чтобы срабатывал вызов скайпа (skype:логин?call), а не переход на сайт Skype. Это возможно?

    • В теме используется комплект иконок Genericons, там нет кнопки Вконтакте, а у нас на сайте это реализовано с помощью дополнительного шрифта с IcoMoon. Со скайпом посмотрим, может быть возможно и ?call и ?chat реализовать…

      • Спасибо. А как все же сделать описание сайта на главной странице? Я уже понял, что на страницах рубрик описания появляются автоматически, из описания рубрики. А вот на главной как?.

        • Описание можно вставить с помощью плагина и события semicolon_header_after. Оно выполняется сразу после вывода меню, там можно выполнить проверку на главную страницу с помощью функции is_front_page().

          • art_gud

            А можете написать подробнее, как это реализовать. Не силен в програмировании, и с событиями не могу разобраться.

          • Вот как это реализовано на нашем сайте:

            add_action( ‘semicolon_header_after’, function() {
            if ( ! is_front_page() || is_paged() )
            return;
            ?>
            <header class=»page-header page-description»>
            <h1 class=»page-title»>WP Magazine это онлайн журнал …</h1>
            </header>
            <?php
            });

          • art_gud

            Спасибо огромное) Все таки еще было бы не плохо добавить событие на хлебные крошки.

          • art_gud

            Я так понял, этот код нужно просто вставить в functions.php, но у меня не сработало. Что-то нужно сделать еще? Спасибо!

          • Да, в functions.php дочерней темы или в плагине. Больше ничего делать не нужно.

          • art_gud

            Будем пробовать еще, спасибо)

          • Добавил ваш код в functions.php — получил ошибку. После редактирования (!is_front_page() был с пробелом) плагин включился, но ничего не выводится на странице. ЧЯДНТ?

          • Это зависит от ошибки :) еще не совсем понятно о каком плагине идет речь, если вы вставили ваш код в файл functions.php дочерней темы.

          • Необходимо менять functions.php именно дочерней темы? Я менял файл из вашей темы. Это, конечно, идеологически некошерно, но влияет ли это на работоспособность вставляемого кода?
            А ошибка была, как я понял, что между ! и is_front_page() был пробел. Убрал его и сообщения об ошибке не стало.

          • На работоспособность нет, но при обновлении все ваши изменения потеряются. Пробел между оператором отрицания ! и вызовом функции is_front_page() не мог вызвать ошибку. Смотрите логи ошибок, там будет указан конкретный текст ошибки.

          • Выдает Parse error: syntax error, unexpected T_FUNCTION.
            В сети пишут, что это может быть из-за версии PHP (у меня 5.2.*). Похоже на правду? И что делать, переезжать на другу версию из-за такой малости?

          • Правильно, 5.2 не поддерживает анонимные функции через класс Closure, т.е. так делать нельзя:

            add_action( ‘foo’, function() { bar(); } );

            Для того же эффекта в PHP 5.2 и ниже можно переписать это следующим образом:

            function my_bar() { bar(); }
            add_action( ‘foo’, ‘my_bar’ );

            А вообще да, советуем вам как можно скорее перейти на более новую, стабильную и безопасную версию PHP :) Последняя версия PHP 5.2 была выпущена в январе 2011 года.

          • Спасибо, сейчас попробую переписать сниппет. На PHP 5.3, видимо, придется таки переезжать.

            Маленький вопрос не в тему. Как вы выделяете в комментариях вставку кода (вертикальная серая черта слева)?

          • Тегом <pre>.

          • Подскажите куда вставить это код?

          • Вы можете создать новый плагин и разместить этот код там, или в дочерней теме в файле functions.php.

      • Удалось ли реализовать кнопку скайпа? И, если можно, сделайте инструкцию, как подключить иконку ВКонтакте.

  • Отличная тема, а как в ней добавить лого в шапке? И можно чуть подробней о добавлении популярных записей в сайдбар? Jetpack установил, но что-то не понял, как там дальше. Заранее спасибо.

    • Про лого в шапке уже писали — https://wpmag.ru/2014/semicolon-theme-beta/#comment-1340203841.
      Про добавление популярных записей с JetPack — открываете Консоль/Внешний вид/Настроить и там есть вкладка Избранное содержимое. В нем надо указать какую-либо метку, например «избранное». Записи, помеченные этой меткой, и будут выделяться как популярные.

      • Serg Bakumov

        Про лого в шапке по ссылке не нашел…если не сложно, подскажите пожалуйста, как сделать или где посмотреть…

    • Спасибо. Про логотип здесь уже спрашивали, смотрите комментарии. Популярные записи добавляются с помощью виджета от Jetpack. Т.е. после активации Jetpack, свяжите его с вашим аккаунтом на WordPress.com, затем на странице модулей убедитесь в том, что включены доп. виджеты, а дальше в разделе виджетов найдете «Популярные записи и страницы».

  • Константин, а что могло случится? На expound всё стояло ровно, сейчас же adsense съехал. Хотел прилепить картинку, да нет такой возможности.

    • Сложно сказать без подробностей, но мы обновления к Expound давно не выпускали.

  • Дмитрий

    Здравствуйте!
    А как генерируеться размер превью на главной страницы? У меня все одного размера(

    • Вам необходимо выделять записи. Сделать это можно прилепив запись на главную страницу отметив эту опцию при публикации записи, или с помощью плагина Jetpack и его модуля Featured Content.

      • Дмитрий

        не работает(

      • Дмитрий

        То есть по какому принципу выводятся большие миниатюры?
        У вас на главной их несколько, включая старые записи, а не только первых 2.
        как так сделать?

        • Крупные миниатюры выводятся для записей выделенных с помощью Featured Content или с помощью галочки «прилепить на главную» при редактировании записи. В начале на главной показываются только две выделенные записи, а другие выделенные располагаются как и все в хронологическом порядке.

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

  • Шрифт вам надо сгенерировать на IcoMoon и подключить с помощью wp_enqueue_style в плагине, как и любой другой файл CSS.

  • Спасибо, мы обязательно поразмышляем по этому поводу :)

  • Пока обновлений не планируем, но если будут до запуска на WordPress.org, то мы обязательно сообщим всем, кто скачал тему.

  • Было бы замечательно если в релиз вы включите quick start архив с темой — чтобы все необходимые плагины уже были установлены и подключены.

    • Юрий, необходимых плагинов нет. Эта тема прекрасно работает и сама по себе без каких-либо дополнений :)

      • Да уже давно разобрался. Спасибо)
        Просто сначала не понял как выводить featured посты. Потом понял что для этого все лишь надо поставить плагин JetPack и настроить тег для featured постов в настройках темы.

        Спасибо за тему!) Использую ее теперь на своих сайтах.

  • Юрий, никакго кода никуда прописывать не надо, вы нашли инструкцию для разработчиков :)

    Модуль Featured Content активируется тогда, когда тема его поддерживает. То есть если вы активировали Semicolon и у вас активен плагин Jetpack, то модуль Featured Content автоматически становится доступным.

    Настроить модуль можно в конфигураторе темы, раздел Внешний вид → Темы → Настроить. В списке слева вы увидите пункт Featured Content (или избранное содержимое), где можете указать название метки. Вставьте там любую метку, например «featured», сохраните изменения, а затем опубликуйте несколько статей с использованием этой метки.

    • Благодарю за подробное разъяснение. Теперь все получилось!)

    • Serg Bakumov

      Константин, подскажите пожалуйста, все осталось так, как вы писали?: раздел Внешний вид → Темы → Настроить. В списке слева вы увидите пункт Featured Content (или избранное содержимое)? Я установил Semicolon, потом установил jetpack, но модуля Featured Content в списке нет…может что-то еще нужно подключить?

  • art_gud

    Еще возник вопрос на засыпку) В вашей теме отсутствует файл category.php. Мне нужно на страницах категорий вывести описание, то есть description. В старой теме в отсутствуем файле я выводил так:

    <?php if ( $paged

    Подскажите пожалуйста, как это реализовать в semicolon. Спасибо!

    • Посмотрите файл archive.php.

      • art_gud

        Спасибо)

      • art_gud

        Странно, но и файл archive.php отсутствует.

        • Значит index.php :)

          • art_gud

            if ( is_category() ) :
            single_cat_title();

            это оно? =)

          • Да.

          • а подскажите пожалуйста куда и какой код вставить
            мне тоже нужны описания категорийрубрик

          • art_gud

            <?php if ( $paged

            Я вставил сразу после конструкции … в файле index.php

          • что то не встает у меня

            точно после … вставлять?

            и все наклонные в коде удалять?

  • art_gud

    Добрый день. Заметил, что вы многое поменяли, оптимизировали тему под мобильные устройства, наконец-то сделали правильную микроразметку для Гугла, футер, в конце-концов. Будете ли вы выкладывать промежуточные обновления темы до релиза или ждать онового?

  • подскажите пожалуйста куда и какой код вставить
    мне тоже нужны описания категорийрубрик

  • Спасибо! В новой версии вроде все ок, она скоро будет доступна в репозитории WordPress.org.

    • Отлично, буду ждать обновление. Спасибо за прекрасную тему

  • Сергей

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

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

  • Максим Партизан

    После активации темы, перехожу на сайт выдает ошибку 502…… подскажите, что делать?

  • Fedorov

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

  • Рустем

    Подскажите пожалуйста
    Статьи должны добавляться по иерархии времени.. Если статья только что добавлена по идее она должна быть сверху-слева, но у меня почему-то избранная там закреплена. А после добавлении новой она остаётся на месте. Как исправить?
    И в категориях Избранные отображаются стандартно, маленький вид.
    Кто-то встречался с подобным?

  • Кирилл

    Здравствуйте! Подскажите в какую сторону копать)

    Установил тему на чистый WP. Активных плагинов 0, .htaccess дефолтный. Выдает ошибку «500» с припиской:

    На нашем сервер php работает в режиме FastCGI. Это означает, что директивы php_value, php_flag, php_admin_value и php_admin_flag в .htaccess не работают и вызывают данную ошибку.

    С .htaccess колдовал уже по-разному, в том числе удалял его полностью. Может ли кто подсказать в чем может быть проблема?

    • Кирилл

      От себя добавлю, что возможно конфликт связан с выводом записей в index.php

      При удалении цикла ошибка проходит. Сам по себе цикл вряд ли может вызывать ошибки, но его наличие почему-то «злит» мой хостинг. Может у кого-нибудь есть идеи что сделать, кроме как поменять хостера и руки?)

      P.S. другие темы не глючат.

      • Кирилл

        И вот проблема решена. Хостер со свой стороны что-то подправил и все заработало.

        • Кирилл, а вы не могли бы узнать что именно сделал хостер?

          • Кирилл

            Завтра будет смена человека, который вел меня в этом вопросе. Если он вспомнит что к чему — отпишусь.

          • Кирилл

            Ответ хостера: поменяли версию PHP c 5.3. на 5.4.37

  • Stanislav Shendrik

    У Вас в теме уже вшиты хлебные крошки или это установленный плагин?

    • Это хлебные крошки из плагина WordPress SEO.

  • Виктор

    Константин, через несколько месяцев работы с очень симпатичной темой Semicolon обнаружилась проблема с заголовком h1. Статьи получаются как надо — с одним h1 на странице. Но на главной странице сайта, а также на главных страницах категорий, число заголовков h1 равно числу статей, выводимых на главную. Если, к примеру, выводишь по 10 постов, то получаешь на главной 10 заголовков h1. Что посоветуете?

    • Советую почитать спецификацию HTML5 если вы считаете, что на одной странице должен быть лишь один тег h1 :)

      • Виктор

        Это не я, это SEO-аудиоторы считают, что несколько тегов h1 на одной странице ведут к убийственным, для сайта, последствиям.

        • Могу добавить, что большинство тем под WordPress сверстаны именно так, что на 1 странице много заголовков h1.

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

  • Zarema Asanova

    Здравствуйте, Константин. Нужна ваша помощь: не получается сделать шаблон на всю ширину экрана на данной теме.
    Новый шаблон создан, однако отображается контент некорректно. Справа остается отступ. Хотела поменять класс content-area ( в базовом шаблоне строчка ) и присвоить ему новое название только для данного шаблона, но не могу найти класс в файле style.css.

    И еще вопрос. В описании темы указана метка «Одна колонка» — где ее найти? в каких настройках темы?

  • Отличная тема! Понравилось, что она аккуратно интегрируется прямо в нужные менюшки/настройки админки ворпресса со своими опциями (вместе с Jetpack), то есть настройки разбросаны по нужным разделам — а не выделены в отдельный монструозный и бестолковый зачастую раздел опций. Это суперский подход. Жду версии 1.0 :)