Wp для мобильных. Мобильные WordPress темы и плагины или Как адаптировать WordPress темы под мобильные устройства? Мобильный плагин WPtouch Mobile

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

2. Responsive Widgets

Responsive Widgets – плагин, который вводит новые текст/HTML виджеты для WordPress, которые появляются только в определённых устройствах, таких, как iPads, Nooks, PlayStation Vita и других универсальных устройствах, таких, как планшеты или смартфоны.

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

• Mobile
• Mobile (landscape)
• iPhones and iPods
• Phablets
• Tablet (portrait)
• Tablet (landscape)
• iPad Portrait
• iPad Landscape
• Nexus Tablets
• Kindle Tablets
• Surface Tablet
• Nook Tablets
• PS Vitas
• Desktops
• Large Monitors (1240px+ screens)
• Print only

3. Responsible

Responsible – очень полезный плагин для WordPress, который проверяет адаптивность ваших страниц «на лету» в браузере. Он использует Viewport Resizer Bookmarklet в панели, зафиксированной в верхней части вашей страницы, где вы можете изменять размер страницы для мобильных устройств, таких, как смартфоны, планшеты или настольные экраны, и выставлять нужные вам размеры.

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

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

4. WPTouch Mobile Plugin

Этот плагин имеет более пяти миллионов загрузок и рейтинг 3.9 из 5 звёзд. WPTouch является, вероятно, самым популярным плагином для мобильных тем на сегодняшний день. Он позволяет создать мобильную версию вашего сайта очень простым способом, полностью автоматизированным.

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

В качестве предупреждения надо сказать, что в июле 2014 года было объявлено: WPTouch 3-х версий имел просто убийственную уязвимость. Уязвимость была исправлена сразу же, но, возможно, вызвала большие проблемы для пользователей плагина. Хороший повод, чтобы посмотреть обновления, и это касается как ядра, так и всех плагинов и тем.

5. WordPress Mobile Pack

WordPress Mobile Pack – ещё один хороший плагин, который предлагает мобильные темы для WordPress сайтов. Сейчас он имеет более 600 000 загрузок и рейтинг 3.8 из 5 звёзд. WordPress Mobile Pack предлагает уникальную мобильную тему для вас и посетителей ваших сайтов – мобильное приложение-интерфейс вместо классического интерфейса для мобильных телефонов.

Как и WPTouch, WordPress Mobile Pack – это полностью готовый к использованию плагин сразу после того, как вы установите и активируете его. Если хотите, вы можете внести некоторые коррективы на странице конфигурации.

6. Jetpack by WordPress.com

Jetpack – не только один из самых популярных плагинов для WordPress, он также поддерживается WordPress.com и Automattic. Этот плагин также имеет функцию «Мобильная тема», которая может быть вам очень полезна

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

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

Аль Капоне, Миша Япончик или ребята из Острых Козырьков примерно 100 лет назад вряд ли задавались вопросом что такое мобильная версия сайта wordpress. Скорее всего, их интересовала мобильная версия ограбления.

В наши дни для доблестных воинов интернета часто приходится решать подобные задания.

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

Мобильная версия сайта wordpress — как сделать свой сайт адаптивным

Мобильный сайт — какой должен быть?

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

Мобильная версия сайта wordpress — что такое мобильный сайт?

Адаптивная верстка

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

Будь то Ipod, Iphone, Android или телевизор Samsung, ваш сайт должен выглядеть опрятным везде и всегда.

Мобильная версия сайта wordpress — адаптивная верстка

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

Судя по всему, адаптивный дизайн сайта относится к факторам первостепенной важности.

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

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

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

Адаптивный дизайн — Мобильная версия сайта wordpress

Адаптация сайта под мобильные устройства

Этот вопрос был хитом еще, наверное, лет 5 назад. Сейчас адаптировать сайт, особенно на WordPress, не сможет только полный профан.

Для этого, всего-то-навсего, нужно зайти на пару-тройку сайтов и получить исчерпывающие ответы из статей и видео.

Мобильная версия сайта — адаптация сайта под мобильные устройства

Как сделать мобильную версию сайта

Давайте начнем по порядку.

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

Наверняка, они знают свое дело на приличном уровне.

Мобильная версия сайта wordpress — как сделать

Мобильная версия Яндекс и Вконтакте

Рассмотрите внимательно эти сайты:

мобильная версия вк — https://m.vk.com

мобильная версия яндекс — https://mobile.yandex.ru

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

Вконтакте и Яндекс — Мобильные версии

Проверить мобильную версию сайта

Оптимизирована ли ваша страница для мобильных устройств?

Google Search Console

• Google Search Console Test Mobile Friendly
  https://search.google.com/test/mobile-friendly

Яндекс Вебмастер

• Яндекс Вебмастер
  https://webmaster.yandex.ru/

Bing Mobile Test

• Bing Mobile Test
  https://www.bing.com/webmaster/tools/mobile-friendliness

ВебМарк

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

• ВебМарк
  http://webmark.com.ua/mobile/

Проверка мобильной версии сайта — регулярный подход.

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

Поэтому проверять мобильную версию сайта желательно постоянно. Особенно при внесении правок в код и установке новых функциональных модулей.

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

Мобильная версия сайта для wordpress

Мобильная версия сайта предлагается практически в каждой теме wordpress.

Разработчики шаблонов заинтересованы предоставить качаственный дизайн с заранее адаптированным интерфейсом под все мобильные и десктопные устройства.

А если самописная или древняя тема, то мобильную версию WordPress можно организовать так:

Плагин

Используйте популярные и с постоянной адекватной поддержкой плагины.

Среди них могу выделить Jetpack и WPtouch.

Видео об этих 2-х плагинах смотрите ниже.

Без плагина

Если решили сделать без плагина, то отлично. Профессиональный подход.
Добавьте в файл стилей несколько незамысловатых строк медиа-запросов (типа, @media screen and (max-width: 768px){…}), и будет вам счастье.

Или подключите свой mystyle.css в файле шаблона и спокойно контролируйте адаптивность через FTP.

Только не забывайте учитывать моменты обновлений движка WordPress.

Как поступить лучше, — вам виднее.

На поддомене

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

Мобильная версия сайта для wordpress — варианты

Настройка мобильной версии сайта

WordPress

В WordPress адаптация настроена со старта.

О, мой уважаемый читатель!

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

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

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

Сегодня, как говориться, — в Вордпресс все включено.

Не скрою, что под личные нужды иногда приходится подправить код.

Мобильная версия сайта wordpress — как настроить

Jetpack настройка мобильной версии

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

Ответ по настройке можно найти в следующем плейлисте:

Мобильная версия сайта wordpress — плагин Jetpack

Woocommerce мобильная версия

Обычно, Woocommerce сам автоматически подстраивается под текущую тему WordPess, которая должна быть адаптивной.

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

• Скачать Woocommerce 3.4.3 zip по прямой ссылке с https://ru.wordpress.org

Мобильная версия сайта wordpress — woocommerce

Wptouch

Пожалуй, самый популярный плагин для реализации мобильной версии сайта на WordPress — плагин WPtouch.

В следующей подборке видео дан обзор, рассмотрена установка и настройка плагина WPtouch.

Мобильная версия сайта wordpress — плагин WPtouch

WordPress мобильная версия на поддомене

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

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

Для среднестатистического сайта на WordPress с головой хватает обычного хорошо настроенного адаптивного шаблона.

А если у вас wordpress-сайт с посещаемостью 20 000 или более человек в сутки, то вы бы врядли чиали эти строки.

Мобильная версия сайта wordpress на поддомене

Как отключить мобильную версию сайта wordpress

Такой вопрос иногда проскакивает тоже.

Ну… Смысл отключить?.. Взять и отключить. Как включали, так и отключите.

Или скажите тому, кто включал. Он все отключит.

И зачем тогда было настраивать…

Да и вообще — странный вопрос. Почему то таких аж 15 раз в месяц фигурирует в вордстате.

Может не нужно было и затрагивать?..

Мобильная версия сайта wordpress — как отключить?

Программа для создания мобильной версии сайта Adobe Muse

Adobe Muse — удивительная разработка корпорации Adobe для создания сайтов любой сложности и любого назнаения.

В этом видео рассмотрено создание мобильной версии сайта в программе Adobe Muse.

Мобильная версия сайта — программа Adobe Muse

Если у вас Не WordPress

Что касается других платформ и сайтов, то всегда есть подходящий ответ от людей, которые от чистой души публикуют свои видео.

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

На этом завершаю.

Удачных событий и свершений.

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

Смотреть видео — мобильная версия сайта wordpress

Мобильная версия сайта — плейлист 67 видео

Мобильная версия сайта wordpress на Бизнес на WordPress

Любой качественный сайт должен иметь мобильную версию сайта, ведь мобильный трафик постепенно растёт, а отсутствие адаптивной верстки сайта приводит к отказом. Это так же заметили в Google, после чего было решено проверять сайты на наличие мобильной версии сайта, а с 21 апреля 2015 года и во все станет фактором для ранжирования.
Так как же сделать мобильную версию сайта, что бы избежать отказов и понижения позиций? Для решения этой проблемы существуют два способа. Первый способ — сделать адаптивную вёрстку, второй способ — сделать отдельный дизайн мобильной версии сайта. Так как мой сайт на WordPress покажу решения только для данного CMS движка.

Как сделать мобильную версию сайта WordPress

Однако, если вы довольный своим шаблоном и вам не хочется плагинов, есть вариант сделать ваш шаблон растягивающимся без плагина, как мой. Для этого достаточно прописать в css — «width: 100%» . Ну а что бы дизайн не сильно растягивался добавить строчку:

#content {
max-width: 1280px;
}

Кроме этого в вашей теме картинки могут быть фиксированного размера и не растягиваться, исправляем это такими строками:

img, embed, video {
max-width: 100%;
}

Недостатки такого способа:

• Тяжело разместить каждый эллемент красиво для разных экранов.
• Медленная загрузка сайта из-за не сжатых картинок + подгрузки лишних не оптимизированных скриптов.

Безусловно такой способ позволяет сделать мобильную версию сайта, но мне не нравятся эти недостатки. Поэтому разберём второй вариант, где нету таких недостатков, однако есть другие, более серьёзные для SEO.

Самый удобный вариант для пользователей, это иметь отдельный поддомен с мобильной версией, так поступают сайты гиганты, популярные сайты ну и конечно различные успешные сервисы. Обычно создают поддомен m.website.ru либо mobile.website.ru.

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

В чем недостаток этого способа:
1. По сути вы создаёте дубликат сайта, выходит что нужно наполнять 2 сайта, конечно можно сделать авторепостинг с помощью NextScripts: Social Networks Auto-Poster, но следить за двумя сайтами не практично.
2. Так как мобильная версия дублирует контент, поэтому нужно либо запрещать к индексации поддомен, тогда поисковики не оценят ваш труд. Либо прописывать в head — rel=»canonical», показывая что контент дублируется, однако в выдачи первой страницы m. версии уже не будут.
3. Как не стараться SEO оптимизация таких страниц превращается в тяжёлую работу, либо вы пишите уникальный контент для мобильной версии, либо не выйти в топ таким страницам.

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

Порядок действий как сделать отдельную мобильную версию сайта WordPress:
1. Создаём поддомен (пример m.сайт) на хостинге;
2. Покупаем платный шаблон, либо создаём собственный для мобильных телефонов. Так же есть вариант организовать мобильную версию отдельно с помощь тех же плагинов, о которых писал в первом методе;
3. Загружаем заново весь контент, который должен быть на мобильной версии сайта;
4. Настраиваем индексации и прописываем необходимые параметры для поисковиков.
5. Настраиваем проверку на вход с мобильных устройств на основном домене и поддомене с помощью веб-сервера nginx.

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

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

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

У меня в Гугл-вебмастере уже больше года висит такая напоминалка.

Но я же супер-занятый и мне некогда обращать внимание на такую ерунду!

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

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

Короче, я рубанул эту мобильную версию!

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

Рост числа мобильных пользователей.

Вообще, если смотреть статистику, то даже при моей специфике ИнфоМастерской, уже примерно 4-5% заходят на блог с мобильных устройств. И количество мобильных пользователей только растет.

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

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

Попробовав раз возможности смартфона на андроиде или на 8-ой винде, мы уже не захотим возвращаться к простому мобильному.

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

Таким образом количество мобильных в сети растёт в геометрической прогрессии.

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

Моя задача не убедить вас-делать или не делать мобильную версию сайта.

Я хочу Вас предостеречь от того чтоб не упустить аудиторию и удержать, а еще лучше нарастить посещалку Вашего проекта.

Теперь давайте обсудим как лучше сделать мобильную версию сайта.

Как сделать мобильную версию сайта на WordPress

Мобильную версию сайта можно сделать с помощью плагинов и без.

Давайте сначала обсудим как сделать моб. версию без плагинов.

Еще недавно был очень популярным способом было использование различных сервисов. Суть работы была простая.

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

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

Можно сделать мобильную версию с помощью адаптивной темы.

Сайт распознает что пользователь зашел с мобильного и меняет стили для темы WordPress.

У меня до недавнего времени так и работал сайт, но что-то в последнее время, а точнее последний год, все равно не нравится Гуглу, и он перестал считать, что мой сайт адаптирован под мобильные устройства.

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

Поэтому я все же решил обратится к плагинам.

Для рассмотрения я взял три плагина.

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

1. Jetpack это универсальный плагин с массой возможностей для WordPress.

Среди этих возможностей и создание мобильной версии Вашего сайта.

Подключается очень легко и особых настроек не требует.

Преимущества Jetpack для создания мобильной версии сайта:

1. Простота настроек-включил и пользуйся

2. Все элементы сайта остаются в дизайне просто адаптируются под мобильную версию

3. Плагин постоянно обновляется

4. Что не мало важно это плагин от wordpress.com

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

1. Показывать или нет краткие анонсы на главной моб.версии сайта

2. Показывать или нет миниатюры к записям

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

Вот как выглядит мой сайт wp-home.info в моем телефоне. На этом сайте я использую Jetpack.

Как работать с этим плагином и другие его возможности я показываю в бесплатном видеокурсе “Сайт на WordPress от новичка до ПРОФИ” в второй части курса.

Вот прилагаю видео из этого курса о том, как настроить мобильную версию проекта с помощью Jetpack

Недостатки Jetpack

1. Но к сожалению, для моего блога Инфомастерской он не подходит, т.к. Jetpack создает не малую нагрузку на сайт (в него напихали кучу функционала) и я при посещаемости ИМ уже не могу себе позволить.

Сайт WP-home.info еще молодой и для него такая нагрузка вполне подходит.

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

Я проводил эксперимент и отключал все функции Jetpack, и он все равно грузил базу запросами.

2. WPtouch Mobile Plugin плагин для создания мобильной версии с PRO версией.

Отличный плагин с кучей настроек.

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

Я поставил этот плагин на свой сайт поддержки партнеров. Что сказать результатом почти доволен и буду наблюдать дальше.

Чем хорош WPtouch для создания мобильной версии сайта:

1. Плагин постоянно обновляется и держит в тонусе пользователя

2. Русифицированный и удобный интерфейс

3. Расширенная настройка меню

5. Возможность подключить и настроить изящный слайдер

6. Настройка вывода записей

7. Большой выбор подключения социального обмена-кнопок

8. Возможность вставить в футер дополнительную HTML- вставку

9. Возможность добавлять свои стили

10. Пред осмотр все изменений в настройках

Прилагаю видео с обзором возможностей плагина.

Из недостатков плагина.

1. Плагин не хило грузит сайт при замере плагином P3, но думаю подправить это плагинами кеширования. но… читайте второй пункт

2. Плагин конфликтует с плагином кеширования WP Super Cache, что совсем не хорошо. Это один из моих любимых плагинов кеширования.

И хотя в настройках WP Super Cache есть функция совместимости с WPtouch, но она работает через раз и все равно на сайте начинаются такие тормоза, что не захочется никакой мобильной версии.

Я еще протестирую этот плагин с другими кеширующими и о результатах отпишусь на блоге.

3. Плагин имеет платную ПРО версию с еще большим функционалом. Я бы взял и платную, но пока нужно покатать бесплатник.

3. WPSmart Mobile простой плагин для создания мобильной версии сайта.

Наверное, самый простой и легкий плагин для создания моб.версии. Напишу честно что ПОКА, я остановился на нем.

Ну вот! — могут сказать многие- водил кругами и наконец довел до нужного!

Как в известном анекдоте:

Поцелуй меня в плечо…

Ну ты же то же с далека начал!

Нет! Совсем не так!

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

От себя могу сказать, что я бы с удовольствием использовал для ИнфоМастерской плагин WPtouch и вчера пол дня мучил сайт. Наверняка многие заметили тормоза в работе-это я экспериментировал!

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

Преимущества WPSmart Mobile для создания мобильной версии сайта:

1. Простота настроек

4. Настройка вывода новостей

5. Настройка меню

6. настройка цветовой гаммы

7. Возможность подключения статистики от Гугл

8. Подключения своего аккаунта Адсенса

Теперь пройдемся по настройкам WPSmart.

В левой панели WordPress появился новый пункт-WPSmart. Заходим знакомимся.

Основные настройки WPSmart.

Здесь Вы можете:

Задать другое название для сайта,

Подгрузить логотип сайта (оптимальный размер 400 на 50 пикселей)

Подключить поиск и комментарии

Настроить вывод новостей (включение даты, автора, миниатюры и анонса)

Подключить Гугл-аналитику

Подключить свой аккаунт в Адсенсе

Темы WPSmart.

Выбор небольшой всего три темы:

С анонсами последних записей и миниатюрами сбоку

Просто с анонсами

Вывод последней статьи на главную

Хотелось бы больше тем и разнообразия, но что есть то и берем.

Внешний вид-appearance

В этом разделе все просто, назначаем цвета фону, тексту. ссылкам

Меню

Определяем какое из меню будет показываться в мобильной версии сайта или создаем новое.

не забываем поставить чебокс Enable drop-down pages/links menu.

Иначе меню в моб. версии не покажется.

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

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

И в конце я хочу вам преподнести небольшой подарок.

Новый год всё таки! Хоть и СТАРЫЙ но ведь Новый!

Теперь первую часть курса “Сайт на WordPress от новичка до ПРОФИ” можно скачать в цифровом формате на свой компьютер.

Кроме этого в курс прошита возможность зарабатывать .

Вы сможете получить дополнительный доход сделав несколько простых манипуляций.

Узнаете скачав сам видеокурс вот по этой ссылке.

Создание проектов под ключ любой сложности!
Доводка сырых сайтов до кондиции
Разработка уникального дизайна под заказ
Верстка и натяжка на популярные ситемы: WordPress, MODX, OpenCart Обращайтесь, сделаем качественно и красиво! Skype: ashifin Viber/Mob: V+380503613708

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

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

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

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

Для начала надо понять, что есть 3 пути адаптации вашего ресурса под мобильный поиск:

1. Создание отдельной мобильной версии сайта на поддомене или другом домене.
2. Использование адаптивной темы WordPress, которая автоматически меняет размеры и расположение элементов при открытии на маленьких экранах.
3. Применение разных тем оформления в зависимости от устройства – на компьютере будет один шаблон, для телефона другой (более простой и компактный).

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

Адаптивные темы для WordPress

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

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

WordPress плагины для мобильной версии сайта

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

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

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

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

1. WPtouch Mobile Plugin

Самый первый плагин для мобильной версии сайта, с которым я познакомился, он же и самый известный. Пример работы на моем сайте DmitriyZhilin.ru

В бесплатной вариации он содержит только один шаблон, но его можно настраивать – менять цвета шрифтов, фона, кнопок и т.д. Есть возможность добавить свой код в подвал и дополнительные CSS стили прямо из панели настроек.

Работает плагин на русском языке, правда, перевод слегка корявый на данный момент, но все понятно.

Кроме цветовой настройки есть возможность указать устройства, для которых будет применяться плагин – “яблоки”, “андроиды”, “windows фоны” и т.д.

2. WordPress Mobile Pack

Как и предыдущий вариант, имеет одну бесплатную тему, а остальные открываются после приобретения PRO версии.

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

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

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

Чуть не забыл – необходима версия PHP вашего хостинга не ниже 5.3.0

3. Плагин Mobile Smart

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

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

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

4. WP Mobile Edition

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

• Минималистичный дизайн (показал максимальную скорость и адаптивность в PageSpeed Insights от Google)
• удобное меню, специально адаптированное к маленьким экранам,
• удобная главная страница с последними статьями,
• кнопка переключения на обычную тему из мобильной и шорткод для размещения кнопки перехода в мобильную версию из обычной (этого не было в рассмотренных выше).

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

Сам дизайн пока один, но он содержит несколько цветовых схем.

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

Какой плагин выбрать?

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

Сначала испытайте плагины с мобильными темами – 1, 2, 4. Если ни один из них вам не приглянется, то ищите хорошую тему с адаптивным дизайном и подключайте ее для мобильных пользователей плагином Mobile Smart (3), тут уж никаких ограничений нет – использовать можно любой шаблон.

Не забудьте про кэширование

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

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