Архив категорий Вебдизайн и Wordpress

Автор:human

Адаптивный дизайн в wordpress: на примерах

Адаптивный дизайн на WordPress: примеры тем, основы и советы по CSS

Адаптивный дизайн в

wordpress: на примерах

 

Начиная с 21 апреля 2015  Google в очередной раз закрутил гайки в механизме ранжирования своей поисковой выдачи.

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

Что представляет собой адаптивный дизайн?

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

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

Примеры адаптивного дизайна

 

Тема Divi 2.0

 
Не нужно далеко ходить. И на WordPress есть отличный пример качественного отзывчивого дизайна – тема Divi 2.0. Просто откройте эту тему на мобильном устройстве. Она сразу же приобретет ширину экрана и компактно отобразить все элементы дизайна в читабельном виде. А вот как поведет себя тема, если вы будете изменять размеры окна браузера на своем компьютере:

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

Эти изменения условно называются CSS media query – это заявление в таблице стилей, которое используется для вызова других заявлений и основано на размере экрана того устройства, под которое создается адаптивный дизайн.

Чем меньше его ширина, тем больше сайт оптимизирован под мобильные устройства типа iPhone или Android.

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

Сайт <noindex>Time.com </noindex>

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

Как можно расширять свои знания об адаптивном дизайне?

Тестирование ранее посещаемых сайтов

Если тестировать все посещаемые сайты на разных устройствах, то через некоторое время это войдет в привычку. Некоторые сайты абсолютно по-разному выводятся на экран на разных устройствах. Например, Google использует абсолютно отличающиеся таблицы стилей в зависимости от ширины экрана устройства. Такой метод требует дополнительного кода CSS помимо стандартного CSS, и применяется еще и на таких крупных сайтах, как Google, Amazon, Yahoo.

Другие методы

Также в самообразовании в сфере отзывчивого дизайна поможет:

  • Чтение тематических блогов и руководств
  • Прохождение курсов
  • Посещение воркшопов
  • Пополнение знаний о CSS3 и использовании Media Queries
  • Самостоятельное внедрение знаний на практике
  • Создание, пусть и простого, сайта с помощью основ HTML и CSS для понимания принципа их работы.

Как сделать сайт на WordPress отзывчивым?

Ну вот, самая интересная часть поста. Для создания адаптивной версии сайта на WordPress необходимо использовать CSS3 Media queries, о которых сегодня уже упоминалось.

Стандартное media-query-заявление выглядит таким образом:

@media (max-width: 700px) {
    .container {
        width: 100%;
        margin: 0 auto;
    }
}

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

В коде есть элемент @media с ограничением (max-width: 700px) и это значит, что если разрешение экрана или окно браузера достигает 700 пикселей или меньше, то применяются параметры, указанные в скобках.

Лучше конечно использовать эти правила @media без фанатизма и по-меньше.

Пример

Для демо версии будут использованы основы HTML и CSS, чтоб показать на примере, как создаются правила адаптивного дизайна внутри кода. Этот же метод используется и для сайта на WordPress. Нужно только применить стили в файле style.css, чтобы изменить дизайн сайта.

Код HTML

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Elegant Themes Responsive Web Design - Demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="container">
        <h1>Responsive Web Design</h1>
            <ul>
                <li><a href="#">Sample Link 1</a></li>
                <li><a href="#">Sample Link 2</a></li>
                <li><a href="#">Sample Link 3</a></li>
                <li><a href="#">Sample Link 4</a></li>
                <li><a href="#">Sample Link 5</a></li>
            </ul>
        </div>
    </body>
</html>

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

Вот как отображается страница в Chrome:

Конечно же, мы не можем оставить ее в таком виде, и используем CSS.

Код CSS

body {
    background: PowderBlue;
    font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
    font-size: 16px;
}
.container {
    width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background: white;
}
.container h1 {
    text-align: center;
}
.container ul {
    list-style-type: none;
}
.container ul li {
    display: inline-block;
    padding: 10px 20px;
}
.container ul li a {
    display:block;
    padding: 20px;
    background: Tomato;
    border-radius: 4px;
    color: black;
    text-decoration: none;
}
.container ul li a:hover {
    background: black;
    color: white;
}

После применения стиля страница выглядит уже вот так:

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

Что же тогда делать?

Необходимо использовать media query, что поможет подстроить страницу под изменения в CSS. Для этого нужно добавить нижеуказанный код CSS в низ файла style.css.

@media (max-width: 970px) {
.container {
    width: 100%;
    margin: 0 auto;
    padding:20px 0;
}
.container ul {
    padding:10px;
}
.container ul li {
    display:block;
    padding:10px 0;
}
}

Теперь, когда код добавлен, можно изменить размер окна браузера, чтобы увидеть эффект адаптивности:

Отлично! Можно настроить еще несколько элементов, как только браузер приобретет минимальную ширину. А использование media query поможет улучшить результат. Добавьте эту часть внизу файла style.css:

@media (max-width: 480px) {
    .container h1 {
        font-size: 22px;
    }
}

Понемногу дизайн приблизился к желаемому конечному виду. Правда уже лучше?

Теперь адаптивный дизайн полностью готов. Этот принцип можно использовать для любого сайта, независимо от CMS.

Обработка изображений

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

Но общее решение состоит в том, чтобы задавать изображениям максимальную ширину – 100%. А именно вот так:

1
2
3
img {
  max-width:100%;
}

Вот как отображается графика на сайте после применения этого решения:

Читабельность

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

Юзабилити

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

Темы

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

Заключение

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

Автор:human

WordPress обновлен до версии 4.4

Встречайте Twenty Sixteen

Наша новая тема, Twenty Sixteen, — современная версия классического дизайна для блога.

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


Адаптивные изображения

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


Вставка материалов

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


Ещё больше провайдеров объектов

Помимо вставки записей, WordPress 4.4 поддерживает вставку объектов с пяти новых сервисов oEmbed: Cloudup, Reddit, ReverbNation, Speaker Deck и VideoPress.


Под капотом

Инфраструктура REST API

В ядро интегрирована инфраструктура REST API, что означает новую эру в разработке для WordPress. REST API позволяет разработчикам создавать и расширять приложения с использованием RESTful API на основе WordPress.

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

Метаданные для элементов

Элементы таксономий теперь поддерживают метаданные, как и записи. См.add_term_meta(), get_term_meta() иupdate_term_meta().

Улучшения в запросах комментариев

Запросы комментариев теперь поддерживают кеширование. С помощью новых аргументов WP_Comment_Queryможно создавать более гибкие запросы.

Объекты элементов и комментариев

Новые объекты WP_Term, WP_Comment иWP_Network делают взаимодействие с элементами, комментариями и сетями на уровне кода более простым и понятным.

Автор:human

Установка favicon на WordPress

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

Спецификации для favicon.ico:

Размер :48*48

Расширение — ico.

Создать favicon.ico можно в клевом растровом редакторе — GIMP.

Ну вот у нас уже есть файл с favicon.ico. Следующий шаг — подключить его к теме. Загружаем его на сайт и получаем его ссылку. Готово. В папке с текущей активной темой есть файл header.php. Отредактировать его можно как через админку, так и через ftp- кому как удобно.Открываем его, и вставляем код в строчку, которая идет после

<head>

<link rel=»icon» href=»сслыка на файл» type=»image/x-icon» />
<link rel=»shortcut icon» href=»сслыка на файл» type=»image/x-icon» />

Все сохраняем файл. Profit. мы выполнили установку favicon на WordPress

P.S. Если вам интересно, как создавать свою тему на WordPress. то Вам сюда.

Автор:human

Кросспостинг wordpress в twitter

Приветствую, знали ли вы, что если настроить кросспостинг wordpress (автоматическая публикация в социальные сети) то, индексация в поисковых системах происходит в разы быстрее? Это связанно с тем, что поисковые роботы буквально живут в социальных сетях, так как, чем чаще публикуются записи, тем чаще поисковики заходят к вам на сайт. Но ручками публиковать записи в твиттер, как-то не модно, и тут все задумываются об автоматизации этого процесса. В этой статье я расскажу вам, как автоматически публиковать записи из wordpress в twitter.

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

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

1. Установка плагина

Устанавливаем плагин Wp to Twitter любым удобным вам методом .

Скачиваем плагин, переходим в админку Плагины – Добавить новый – добавить загруженный файл – нажав “Установить” – Активировать плагин.

2. Регистрация Twitter приложения

  1. Перейти по ссылке, и войти под своим твиттер именем (логин, НЕ ЭМЕЙЛ) и паролем.
  2. Нажимаем “Create New App”.
  3. Имя любое (без употребления “twitter”).
  4. Описание любое.
  5. “Website” – главная страница вашего сайта.
  6. Соглашаемся с правами (Ставим галочку “Yes, i agree”).
  7. Нажимаем “Create your twitter application”.

3. Настройка приложения

После успешной регистрации, вы увидите примерно такую картину.

Зарегистрировать приложение в твиттере

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

  1. Переходим в “Permissions”.
  2. Выбираем “Read and Write”, и нажимаем “Update settings”. Через несколько минут, настройки вступят в силу.
  3. Тем временем, переходим в “API Keys”, опускаемся вниз и нажимаем “Create my access token”.

4. Вносим данные в плагин

После внесения всех настроек, обновите страницу “API Keys”, чтобы отобразились данные об Token (в конце страницы).

  1. Переходим в настройки нашего плагина, в админ панели Настройки – WP to Twitter.
  2. Вносим все данные API key, API secret, Access token, Access token secret. Данные копируем из нашего приложения, которое мы создавали в предыдущих пунктах.
  3. Сохраняем.

Если все успешно, то вы должны увидеть

Wp to Twitter корректно подключен

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

5. Настройка плагина

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

В первую очередь, для того чтобы ссылки сокращались, нужно выбрать сервис сокращения ссылок. Я выбрал goo.gl, так как на момент написания этой статьи сервис bit.ly глючил, и я не мог подключить его API (для отслеживания кликов), а goo.gl можно подключить без API Key.

Wp to twitter выбрать сокращение ссылок

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

Wordpress кросспостинг в Твиттер

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

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

Яндекс.Метрика