Автор: Neil Lock

  • Что вообще такое шорткоды?

    What-Are-Shortcodes-AnywayЕсли вы заметили, одно из главных правил WordPress — всегда, непременно делать всё немного проще для каждого: как для новичков, так и для опытных разработчиков. Один из способов достижения этой цели — использование шорткодов.

    Страница поддержки WordPress.com определяет их следующим образом:

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

    По сравнению с обычным кодом, который обычно выглядит примерно так:

    HTML5-video-tag-sample-code
    (Эмм. Что?)

    Шорткоды в целом выглядят примерно вот так:

    embed_shortcode
    (Проще простого.)

    …и если вы разработчик (или, чёрт возьми, хотя бы пару раз сидели за компьютером), вы наверняка согласитесь, что один лишь процесс набора текста и кликов ради выполнения одной пустяковой задачи может отнять кучу времени. По той же причине, по которой мы пользуемся горячими клавишами, существуют и шорткоды — они облегчают жизнь каждому из нас, экономя время для создания более полезных и классных вещей; по сути, они выполняют ту же самую функцию, что и комбинации клавиш.

    Теперь давайте вернёмся к конкретному шорткоду из примера выше:

    embed-shortcode Именно этот шорткод называется embed shortcode и встроен в WordPress по умолчанию. Он встраивает видео по URL-адресу прямо в ваш контент. Если вы сейчас работаете в WordPress, можете скопировать и вставить шорткод выше к себе на сайт, чтобы опробовать его в деле.

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

    А пока экспериментируйте с шорткодами и оцените все их возможности на практике.

    Удачного создания сайтов!

  • Добавление стильных карт на вашу страницу — это интерактивный опыт

    Adding-Stylish-Maps-to-your-Page-is-an-Interactive-Experience-2Теперь вы можете размещать карты в макетах своих страниц с помощью Page Builder Sandwich!

    Радоваться картам может показаться странным. Вы берете URL карты Google и встраиваете её. Или находите плагин карт в сети и вставляете шорткод. Или, возможно, в вашем другом конструкторе страниц уже есть такой элемент, и вы можете добавить его в любой момент. Но мы в восторге от того, что вывели добавление карт на совершенно новый уровень.

    Вот предварительный просмотр:

    Старый скучный способ добавления карты

    Вот как вы добавляете карту с помощью обычного конструктора страниц:

    1. Перетаскиваете новый элемент карты,
    2. Вводите широту и долготу в поля,
    3. Вводите в поля другие значения, такие как высота карты, ширина карты, отмечаете флажок стиля дорог и т. д.,
    4. Нажимаете предпросмотр, проверяете, как это выглядит, и решаете, что нужно что-то изменить, чтобы сделать вид привлекательнее,
    5. Возвращаетесь в конструктор страниц, меняете значения и повторяете шаг 4.

    Способ добавления карты с Page Builder Sandwich

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

    Вот как добавить карту с помощью Page Builder Sandwich:

    1. Добавляете элемент карты,
    2. Вводите широту и долготу или адрес, по которому хотите центрировать карту,
    3. Перемещаете карту, приближаете или отдаляете её, чтобы добиться нужного вида,
    4. Добавляете карте стильные цвета под стать вашему дизайну,
    5. Нажимаете «Сохранить».

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

    Цветные карты или стилизация с помощью SnazzyMaps

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

    Вот пример, который мы окрасили в розовый цвет:

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

    Просто найдите понравившуюся цветовую схему, скопируйте код и вставьте его в Page Builder Sandwich. Цветовая схема сразу же применится к вашей карте.

    Вот классная цветовая схема под названием papuportal dark из SnazzyMaps:

    Размещайте карты где угодно

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

    Если у вас еще нет Page Builder Sandwich, вы можете опробовать премиум-версию, нажав на ссылку «Live Demo» выше.

  • Неозвученная проблема шорткодов

    The-Unspoken-Problem-of-Shortcodes

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

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

    Этот конкретный шорткод называется embed и встроен в WordPress по умолчанию. Он встраивает видео по URL-адресу прямо в ваш контент. Просто скопируйте и вставьте приведенный выше шорткод на свой сайт, если хотите попробовать его в деле.

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

    WordPress берет URL-адрес из шорткода и сверяет его со списком поддерживаемых поставщиков контента. Найдя совпадение, он получает соответствующий код для вставки iframe и отображает его вместо шорткода.

    В чем же тогда проблема? Звучит достаточно просто: вы просто вводите короткий текст со скобками, и готово.

    Но тут появляется Shortcode API…

    Изобилие шорткодов

    Shortcode API открывает разработчикам возможность создания шорткодов. Благодаря этому разработчики могут добавлять собственные шорткоды в свои плагины.

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

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

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

    Попытки решить проблему

    Некоторые плагины пытаются решить эту проблему, предлагая все свои шорткоды в удобном выпадающем списке. Клик по пункту выводит шорткод со всеми возможными атрибутами. Больше нет необходимости запоминать их, и это плюс.

    Screen-Shot-2016-06-22-at-11.27.09-AM

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

    Screen-Shot-2016-06-22-at-11.28.54-AM

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

    Screen-Shot-2016-06-22-at-11.22.41-AM

    Иными словами, каждый плагин действует сам по себе и реализует собственное решение для своих шорткодов. Некоторые плагины добавляют новую кнопку рядом с кнопкой «Добавить медиафайл» или внутри TinyMCE.

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

    Идеальное решение

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

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

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

    Подводные камни

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

    Заметка для разработчиков: да, для функции shortcode_atts был добавлен третий аргумент, но он не является обязательным. Поэтому, пока каждый разработчик плагинов в мире не внедрит его, у нас по-прежнему не будет надежного способа определить все атрибуты шорткода.

    Shortcode API не предоставляет никаких средств для добавления описаний шорткодов, приведения типов атрибутов или описаний самих атрибутов. И пока сам WordPress не добавит единую область для доступа к шорткодам, вряд ли такой инструмент появится.

    Заключение

    На данный момент задача организации шорткодов лежит на плечах каждого отдельного разработчика. Пока в самом WordPress не появится централизованный метод, приготовьтесь и дальше наблюдать множество кнопок «Добавить шорткод» в панели управления. Стоит ли добавлять нечто подобное в ядро WordPress или нет — это отдельная большая тема для обсуждения.

    Альтернатива

    Существуют плагины конструкторов страниц, которые подходят к этому иначе. Вместо программного обнаружения шорткодов в них есть сопоставители шорткодов (shortcode mappers), где пользователи могут вручную ввести все данные шорткода. После этого он становится доступен внутри конструктора страниц. Хотя  это работает, такие решения доступны только на вашем собственном сайте.

    Мы в Page Builder Sandwich создаем то, что, надеемся, решит эту головоломку с шорткодами. Подпишитесь на нашу рассылку ниже, чтобы следить за нашими успехами.

  • WordPress.com против WordPress.org

    Wordpress-Com-VS-Wordpress-OrgЕсли вы относительно новичок в создании веб-сайтов, скорее всего, вы еще не знакомы с вечным спором «WordPress.com против WordPress.org». Возможно, вы даже не знали о существовании одного из них, а также о различных плюсах и минусах каждого. Так в чем же, скажите на милость, заключается этот спор между использованием WordPress.com и WordPress.org? Не является ли один из них просто дешевой подделкой, ждущей судебного иска?

    Вовсе нет.

    Суть спора, если вкратце, заключается в том, какой из этих двух сервисов WordPress лучше подходит для сайта, который вы пытаетесь создать. Ни один из них не является подделкой другого, и оба сайта принадлежат WordPress; просто один (.com) является версией, более дружественной к тем, кто не занимается разработкой, а .org имеет гораздо меньше ограничений при создании сайтов по сравнению с .com.

    «Но как мне узнать, какой из них мне нужен?»

    Ответ на этот вопрос полностью зависит от потребностей вашего будущего сайта. Не существует объективно «лучшей» версии WordPress. У обеих есть свои уникальные особенности и равное количество плюсов и минусов.

    WordPress.com: почему и когда его стоит выбрать?

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

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

    Обслуживание веб-сайта — это совсем другая история. Оно во многом зависит от того, что 1.) вы не являетесь разработчиком WordPress, 2.) не намерены учиться писать код или 3.) у вас мало времени или его нет вовсе.

    WordPress.org: когда стоит обратить на него внимание?

    Одно из практических правил при рассмотрении WordPress.org заключается в том, что его выбирают, когда вы хотя бы немного знакомы с принципами работы кода или готовы уделить время его изучению. Поскольку WordPress.org — это автономная (self-hosted) версия WordPress, вы можете погружаться в технические детали так глубоко, как пожелаете. Кроме того, у вас есть свобода экспериментировать с сайтом столько, сколько захотите. Вы сами будете отвечать за поиск хостинга, настройку резервных копий безопасности и в целом за поддержку сайта самостоятельно — и, что важнее всего, на ваших собственных условиях.

    «Но постойте, зачем мне это? Разве смысл WordPress не в том, чтобы сделать создание сайтов проще?»

    …Не совсем. Подумайте об этом так: The Daily Post приводит отличную аналогию между WordPress.org и WordPress.com, благодаря которой даже самый неопытный новичок (как я) сразу поймет суть.

    По их словам, вам нужно относиться к WordPress.com как к чему-то, чем вы не владеете в полной мере. Представьте, к примеру, себя в 15 лет, когда вы все еще жили с родителями. Если бы вы захотели перекрасить свою спальню, вам сначала пришлось бы спросить разрешения у родителей (которые, разумеется, полностью владеют домом, включая вашу комнату). Технически комната ваша, но в конечном счете, ну… не совсем.

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

    WordPress.org, с другой стороны, это то, что вы можете свободно настраивать и менять по собственному усмотрению. Это можно сравнить с тем, как в 18 лет вы наконец съезжаете от родителей и получаете собственную квартиру. Поскольку жилье полностью находится в вашей собственности, вам не нужно ни с кем идти на компромисс, чтобы покрасить стены в тот цвет, от которого ваша мама всегда приходила в ужас; вы вольны принять решение сами и/или нанять специалиста, который сделает все по вашим стандартам. Кроме того, вы вольны сами выбрать, какой именно кондиционер установить в гостиной. Вот только если он сломается, вам придется нанимать мастера для починки или самостоятельно разбираться, в чем дело и как его починить (что тоже неплохо, ведь это опыт, а учиться — всегда хорошо).

    К этому моменту у вас, надеемся, сложилась более четкая картина того, в чем заключаются существенные различия между WordPress.com и WordPress.org. Но в двух словах:

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

    Контроль над контентом ограничен;

    WordPress.com WordPress.org
    Полный хостинг от WordPress; все самое необходимое включено. Собственный хостинг; выбирайте необходимое самостоятельно или находите более качественные решения.
    Возможности ограничены тем, что предлагает WordPress.com Тысячи возможностей в виде плагинов;

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

    Удачного создания сайтов!

  • 5 причин, почему свободное пространство имеет значение

    Reasons-Why-Whitespace-MattersПо сути, свободное пространство (whitespace), в самом базовом определении, — это незаполненное пространство вокруг и между всеми элементами композиции. Это не просто пустая трата места на экране, как думают многие владельцы сайтов. При правильном использовании «воздух» может принести реальную пользу для более эффективного продвижения продукта. Это ключевой элемент создания хорошего дизайна, который делает сайт лучше во всех отношениях.

    Хотя термин whitespace подразумевает белый цвет, пространство вовсе не обязательно должно быть буквально белым. На самом деле оно может быть любого цвета — даже содержать ненавязчивый узор или текстуру. Это область, на которой вы не хотите акцентировать внимание взгляда. Другое его название — негативное пространство.

    Итак, почему свободное пространство так важно?

    newsfeed
    Источник изображения: News Feed

    Причина №1: Улучшает читаемость

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

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

    hpmagicwords
    Источник изображения: HP Magic Words

    Причина №2: Ускоряет взаимодействие

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

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

    google
    Источник изображения: Google

    Причина №3: Направляет внимание на нужные элементы

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

    Помните: если выделяется абсолютно всё, не выделяется ничего.

    Источник изображения: Pocket Penguins

    Причина №4: Первое впечатление имеет значение

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

    Совет: вот идея о том, как сделать ваш веб-дизайн простым и привычным.

    flockknitwear
    Источник изображения: Flock Knitwear

    Причина №5: Помогает создать «воздух» и баланс

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

    Заключение

    В следующий раз, когда вы зайдете на сайт и задержитесь на нем подольше, подумайте, что именно заставило вас остаться и продолжить чтение. Кажется ли вам, что межстрочный интервал делает статью легче для чтения? Хочется ли вам вернуться сюда снова? Было ли вам трудно найти панель навигации?

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

    Главная цель любого сайта — это коммуникация. Визуальная привлекательность идет рука об руку с успехом вашего проекта.

  • Почему WordPress?

    Why-WordpressПри создании своего первого сайта — будь вы владельцем бизнеса, фрилансером или кем угодно ещё — важно учитывать одну вещь: далеко не все свободно владеют кодом и разбираются в разработке программного обеспечения. Возможно, вы шеф-повар, желающий публиковать рецепты в сети. Или студент художественного факультета, которому нужно профессиональное портфолио, либо стартап, запускающий собственный сайт. Какова бы ни была цель, факт остаётся фактом: хотя некоторые из нас знакомы с основами программирования, мы не профессиональные разработчики с полной занятостью, и далеко не каждый, кому нужен сайт, умеет собирать его с нуля. Именно здесь и пригодится WordPress. Возникает вопрос: «Почему именно WordPress?»

    ПРИЧИНА № 1

    WordPress — это система управления содержимым, предельно понятная пользователю.

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

    По сравнению с разработкой сайта с нуля, которая обычно начинается вот так:

    screenshot-1 В системе управления содержимым старт выглядит примерно так:

    WordPress
    Панель управления WordPress. Создавать сайты и управлять ими с CMS гораздо проще.

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

    С технической точки зрения в WordPress, скорее всего, всё это уже есть — в виде плагина WordPress.

    ПРИЧИНА № 2

    Плагины — вишенка на торте WordPress

    Если вы беспокоитесь о том, что в WordPress отсутствует какая-то особая функция, нужная вашему сайту, не переживайте: скорее всего, она уже существует.

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

    На сегодняшний день для WordPress созданы тысячи плагинов, многие из которых бесплатны или имеют бесплатные версии, включая PBS.

    ПРИЧИНА № 3

    Открытый исходный код: сообщество WordPress

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

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

    ПРИЧИНА № 4

    WordPress пользуется авторитетом

    CNN, официальный блог Star Wars, Time Magazine и даже Beyonce работают на WordPress — и это далеко не полный список. Впрочем, надёжность платформы подтверждается не только громкими именами: по данным Treehouse.com, около 25% всех сайтов в интернете используют WordPress. Учитывая общее количество сайтов в сети, 25% — действительно внушительная цифра.

    ПРИЧИНА № 5

    Огромные возможности настройки

    Для WordPress создано огромное количество тем. Доступны бесплатные и премиум-варианты; кроме того, тему всегда можно создать самостоятельно (или заказать разработку специалисту!).

    ПРИЧИНА № 6:

    Это бесплатно.

    Да, вы всё правильно прочитали. При локальной разработке WordPress полностью бесплатен, и его можно установить на компьютер одним нажатием кнопки. Кроме того, вместо найма разработчика вы можете использовать любые свои знания о коде, чтобы лучше понять, как устроен WordPress (а учиться новому всегда полезно).

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

    Помните: возможности WordPress безграничны, и вовсе не нужно быть гением, чтобы разобраться, как всё это работает!

    Использование WordPress сбережёт вам массу времени, денег и сил. И в моменты, когда этих ресурсов не хватает, помните: сайты WordPress, их плагины (например, PBS!), их темы и особенно сообщество всегда придут на помощь и сделают работу намного проще.

    Удачного создания сайтов!

  • 3 вещи, которые стоит учесть перед погружением в конструкторы страниц

    3-Things-to-Consider-Before-Diving-Into-Page-BuildersВозможно, вы здесь потому, что слышали, будто PBS — это, весьма вероятно, один из самых быстрых способов создания сайтов. Хотя конструкторы страниц в целом созданы для того, чтобы упростить задачу, все же есть несколько вещей, которые стоит учесть, прежде чем погружаться глубже в эту область разработки на WordPress.

    Изучение WordPress: важнейшее предварительное условие для работы с конструктором страниц

    Пожалуй, это самый очевидный пункт в этом списке, но при этом самый важный. К сожалению, конструкторы страниц нельзя просто купить как отдельный продукт. Они поставляются в виде плагинов для WordPress, которые вам нужно будет установить и освоить для работы. Будьте уверены, что WordPress — один из самых простых и надежных способов создания веб-сайта. Вы не пожалеете о технических знаниях, учитывая эпоху, в которой мы живем. Существует разница между WordPress.com и WordPress.org, и  понимание того, что именно отвечает вашим потребностям, также сэкономит время!

    Однако если вас немного пугает обилие некоторых технических терминов в этой статье, не переживайте. Есть несколько полезных сайтов, которые помогут вам начать. Среди них — WordPress Codex и Treehouse. Там собраны советы по WordPress и созданию сайтов в зависимости от ваших потребностей и уровня знаний.

    Возможно, сначала стоит прощупать почву, чтобы быть уверенным

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

    Помимо чтения статей и обзоров, нам в WordPress нравится то, что за ним стоит огромное сообщество. Есть отдельные люди, команды и даже компании, готовые протянуть руку помощи коллегам-пользователям WordPress, особенно новичкам, таким как вы! В основе сообщества лежит скорее принцип взаимной бескорыстной помощи («заплати другому»), чем взаимовыгодный обмен.

    Дизайн имеет огромное значение

    Энтузиаст WordPress Донна Фонтено Кавалье высказывает очень верную мысль относительно drag-and-drop конструкторов страниц и важности базового дизайна. Хотя конструкторы с перетаскиванием элементов, такие как PBS, могут сэкономить вам массу времени, базовые навыки и хотя бы некоторое понимание эстетики — еще один важный фактор, который следует учитывать при создании сайтов. Представьте себе ситуацию: допустим, вы получили в свои руки отличный конструктор страниц на ваш выбор — замечательно! Но при этом, скажем, вы человек, у которого не самый лучший вкус в области искусства, дизайна и функциональности: ой-ой.

    Но не переживайте. Page Builder Sandwich — это не просто конструктор страниц; наша команда также стремится помогать другим пользователям WordPress. Поэтому, если у вас возникли трудности с дизайном, не волнуйтесь: у нас в блоге PBS есть множество статей с массой полезных советов, которые помогут вам начать. Так вы сможете делать больше, узнавать больше и меньше беспокоиться.

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

    Удачного создания сайтов!

  • Сопоставление шорткодов: как PBS будет поддерживать более 800 плагинов и более 2000 шорткодов

    How-PBS-Supports-800-Plugins-2000-ShortcodesWhen I started getting further into software development and WordPress, I noticed that not a lot of page builders I come across with have that “page builder standard” I was looking for: fast, easy, convenient.

    Page Builder Sandwich, then, was created with the goal of having a builder meet these same standards.

    I wanted- and still want it– to be the best page builder out there, and the best way I could accomplish that, I figured, was to add in features in a way in which page building becomes helpful and accessible to everyone –developers and noobs alike.

    I’d like to note though, that I didn’t simply create PBS with the intent of merely bombarding it with features just for the sake of it.

    I want to add in features that people would want to work with; features that hopefully, would make the experience of page building feel a little bit more like magic.

    За последние несколько недель команда PBS добавила элемент карты, а также элемент вкладок.

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

    But I think it’d be better if we take it to the next level; to take a bigger leap, do something more drastic, something drizzled with a little more awesomesauce.

    And so we came up with an idea: “How about we start supporting 800+ plugins along with their 2000+ shortcodes?!?!”

    I know what you’re thinking: “How the heck can you support that much shortcodes? Is that even possible?”

    Well, the simple answer is yes. Yes it is.

    And we’ve managed to achieve this feat through shortcode mapping.

    What is Shortcode Mapping?

    Shortcode mapping
    Shortcode mapping makes building shortcodes more friendly.

    Put more simply, shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

    Преимущества такой системы весьма ощутимы:

    1.) Since PBS already knows what your shortcodes are, you get to spend less time going through the documentation of each plugin you use, and check how to use their shortcodes.

    2. ) In other words: Say goodbye to the grueling task of manually typing in your shortcodes!

    3.) With shortcode mapping, you can also say goodbye to manually checking post type ID’s. How? PBS can give you a list of all your contact forms through a drop-down list, so instead of looking for ID’s while on admin mode, you can pick from the list we made instead.

    4.) You’ll get to use dropdowns, colorpickers, image uploaders, and even number sliders when adjusting shortcode attributes.

    5.) Overall faster page building time!

    Впрочем, маппинг шорткодов не нов, и многие конструкторы страниц уже поддерживают его. Но чем же отличается наш вариант?

    Как работает маппинг шорткодов в других конструкторах страниц

    Lonely times
    Each person/site does their own shortcode mapping.

    Other page builders have a dedicated admin page for shortcode mapping. You go inside your admin page, and then their admin page. You put in your shortcode, edit a number of text fields, then hit save. Finally, when you go to your page builder editor, the shortcode is now there in element list.

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

    What’s more, all your mappings only reside on your site. So when the times comes that you need to work on another site, you’ll have to copy your mappings all over again. Additionally, if and when you install a new plugin that has shortcodes, then you’re going to have to map those too.

    Как работает маппинг шорткодов в Page Builder Sandwich

    Shortcode mapping is centralized
    Shortcode mappings are shared across all users.

    Unlike the norm, shortcode mapping in Page Builder Sandwich is done on a global scale. The most used and popular plugins are gathered first, and all their shortcode mappings are created and updated in a central area. These will then spread out to all users depending on what they have installed. In other words, PBS studies and reviews all the shortcodes you have, including your activated plugins. Afterwards, it gives you the mapping of basically everything you need.

    Это дает нам множество отличных преимуществ:

    1. Maximum coverage. Since we’ll be mapping out the shortcodes of the popular plugins, PBS will be able to support a majority of the shortcodes available on your site.
    2. Constant and frequent additions, updates and corrections. And since it’s in a central area, changes can be made quickly, and can be disseminated to all users.
    3. It basically works like magic. Let’s say you just installed a new plugin. Then you activate it, all mappings for its shortcodes will automatically get sent to you right away.
    4. Gone are the days when you have to personally map shortcodes yourself. PBS will do that for you.
    5. Your site remains lean and fast, and will only contain shortcode mappings that are relevant to you.
    6. Plugin zip size remains small. Even though PBS supports thousands of shortcodes, the plugin file size is still small. Your site and your backups remain small too!

    In case you’re interested in reading into how we made all of this possible,  we actually have a second part to this article in which things might start sounding a little more technical (if that’s your drift).

    Подпишитесь на нашу рассылку!

    You can also opt to sign up to our mailing list, which will automatically notify you when we officially release this feature, (you can get future updates from us too, if you want). The shortcode mapping functionality will be out for our customers tentatively on August 12 August 15 2016. Not all shortcodes will be mapped by this time (our estimate is maybe 100 plugins), but mapping will be continuously done and customers will get them as soon as new ones roll out.

    So sign up to our newsletter to get news on shortcode mapping, when we’ll release it, and when we open shortcode mapping to the public! Until then, we hope you enjoy this new feature of ours, and that you have fun exploring it!

  • 5 простых советов, как сделать ваш сайт привлекательным

    5-Simple-Ways-To-Make-Your-Website-Look-GoodIn general, one thing that most people tend to overlook is today’s demand for functional design and aesthetics. While not all of us may be aware of the extent of just how much it matters, the fact remains that design is a very crucial factor towards success—any kind of success– including your website’s. Yes, your content is an important key towards reeling your audience in, but how your site looks will definitely be a determining factor as well.

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

    Add high-quality images

    You want to add the best quality images on your website that reflect your brand style, but if you don’t have a high-resolution camera or the money to pay a photographer, you can get free stock photos from sources like Pexels and Pixabay. Images should pertain directly to the content of your site. Including images is always better than no images at all.

    Выбирайте правильные цвета

    booneselections
    Lawrence Boone Selections uses black to add a sense of luxury and value to their website
    juicebox
    Juicebox used this zesty combination for people to get that organic and fresh that the brand represents

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

    Выберите максимум два-три базовых цвета для вашего дизайна. Если вы чувствуете потребность добавить больше цвета, можно использовать оттенки и тона ваших базовых цветов. В теории цвета оттенок (tint) — это смесь цвета с белым, которая увеличивает светлоту, а тень (shade) — это смесь цвета с черным, которая уменьшает светлоту.

    Additional Tip: There are great tools such as Adobe Colour CC and Coolors to make picking colors easier.

    Используйте контрастные шрифты

    Font Pairing There are more fonts other than Arial, Georgia and Times New Roman. Google Web Fonts offer a variety of typefaces you can use for free on your site. Just like with choosing colors you can easily over do fonts, so I suggest you do not use more than two typefaces on your website. Most well-designed websites use two typefaces only, one for the headlines and one for the body text.

    Сочетание двух гарнитур может быть непростой задачей даже для дизайнеров. Можно упростить себе задачу, поэкспериментировав с двумя разными начертаниями одного шрифта. Если же вторая гарнитура необходима, выбирайте ту, которая хорошо контрастирует с первой. Как правило, сочетание шрифта с засечками (serif) и без засечек (sans-serif) работает отлично. Еще один важный совет: выбирайте шрифты, соответствующие стилю вашей компании. У вас может быть самый красивый шрифт в мире, но при использовании в неподходящем контексте он все равно будет выглядеть ужасно.

    Сохраняйте чистоту с помощью «воздуха» (свободного пространства)

    Whitespace is one of the easiest and most effective ways to create a visually effective website. Your website should look well organized and clutter free, directing users exactly where they need to go. Make sure elements stand out and are grouped together by using whitespace properly.

    Сделайте сайт удобным для мобильных устройств

    People are probably going to visit your site at different times using different devices and screen sizes. While content is important, consistency across devices provides a better user-experience for anyone who visits your site. It makes it easier for users to share and link contents on your website to social media platforms on mobile. On top of that, Google prioritizes responsive websites on search results.

    Дополнительный совет: использование Page Builder Sandwich на вашем сайте автоматически включит мобильный вид и адаптирует его под размер экрана смартфона.

    Заключение

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

  • Как создать базовые hero-заголовки за 3 простых шага

    How-to-Create-Basic-Hero-Headers-2

    061716_PBS_Jihan_How to Create Basic Hero Headers_Done

    When your dream website finally becomes a reality, the first thing you want your audience to know is what your site’s all about. The trick to reel them in is to give them a good but quick summary of your site’s content – and the easiest way to do that is by creating a Hero Header for your page.

    Что такое Hero Headers?

    The purpose of the Hero Header is to visually communicate with your target audience in the fastest and most efficient way possible. You need to grab their attention quickly, in a way that it says: “Hey, this is my website, and here are the reasons it may be worth your time.”

    Typically, hero headers take up most of the space on the page, usually with large text and an equally large background image in order to give your readers a quick but firm-enough grasp as to what your website can offer them.

    Чтобы приступить к созданию своего самого первого hero header в PBS, выполните следующие простые шаги:

    Шаг 1. Вставьте колонку и настройте ширину строки

    061716_PBS_Jihan_How-to-Create-Basic-Hero-HeadersClick 1 Column below the Insert Content tab on the inspector (that thing on the left/sidebar). Make sure your caret (the blinking cursor on the text box) is inside the text box.

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-1-b_Revised-1Under the Row Properties tab, you may change the background color in order to use it as a guide for the next steps. Change Row Width from Normal to Full-Width: Retained Content Width using the toggle button shown above.

    What’s the difference between Normal, Full-Width and Full-Width: Retained Content Width?

    Row Width-Normal

    Normal – Background, text and other elements are contained within the bounds of your current theme’s row width

    Row Width-Full-Width

    Full-Width – Background, text and other elements fill the entire width of your browser window

    Row Width-Full-Width Retain

    Full Width: Retained Content Width – Only the background fills the entire width of your browser window. Text and other elements are contained within the bounds of your current theme’s row width

    In this layout, Full Width: Retained Content Width is used because the text that will be applied is centered; not full-width.

    Шаг 2. Настройте отступы для создания свободного пространства

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-2-revisedIncrease the top and bottom margin by hovering the cursor on the arrow pointing to the margin you want to adjust. When the cursor turns into a double-headed arrow, click and drag down to your desired margin height. Its important to put Whitespace (also called Negative Space) between elements in a composition to create flow and help draw focus to the content on the page.

    Шаг 3. Добавьте фон с наложением текста и элементов

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-aTo add a background image with text and element overlays, simply click the Background Image icon under the Row Properties tab, upload your desired background image, and select to apply.

    061716_PBS_Jihan_How to Create Basic Hero HeadersTip #1: For Premium users, using the Background Image Tint option, helps to provide more contrast for text, buttons or other elements. You can select a tint color and adjust its value by clicking on the Background Color icon. Both icons can be found under Background on the Row Properties tab.

    061716_PBS_Jihan_How-to-Create-Basic-Hero-Headers_Step-3-cType in the message for your header. See Text Formatting tab to adjust the style. Choose typefaces that are easy to read and goes well with the background image. Remember to show contrast from the background image.

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

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-dYou can also add buttons by clicking on Button below the Insert Content tab.

    Не забудьте сохранить свою работу, и все готово!

    Поздравляем с созданием вашего первого hero header с помощью PBS! Если же у вас что-то не получилось, не переживайте: начинать с нуля в PBS, пожалуй, даже проще, так что это не должно составить большого труда.

    Удачного создания сайтов!