Как сделать мобильную версию сайта? Wordpress как создать мобильную версию сайта
Как создать мобильную версию сайта на WordPress с помощью плагина - На WordPress - Как создать сайт - Каталог файлов
Разработчики об этом осведомлены не хуже, а может даже лучше других, и поэтому вариант заказать платный дизайн или профессиональную адаптацию — не единственный способ оптимизировать тему оформления под мобильные устройства.
Итак, кроме заказной адаптации или создания кода собственными руками можно либо сразу выбрать подходящую под все устройства тему оформления, либо решить проблему с помощью плагинов. Как всегда, под WordPress справляющихся с этой задачей расширений написано очень много. Проблему решает JetPack — достаточно просто активировать в нём мобильную тему, быстро и без программирования создать мобильный сайт позволяет плагин WPTouch, меняет и подгружает подходящее под устройство оформление WP Mobile Detector. Как видите, выбор огромен, — что для вас лучше, то и используйте.
Однако прежде, чем что-либо предпринимать, убедитесь, что ваш сайт под мобильные устройства не оптимизирован. Это можно сделать, например, с помощью сервиса Google.
Просто перейдите по ссылке, введите адрес сайта в единственное на странице поле и нажмите кнопку Анализировать. Например, мой тестовый сайт под смартфоны и планшеты не адаптирован вообще.
Но если тему сменить на стандартную, то картина сразу меняется и Google сообщает, что под мобильные сайт оптимизирован отлично.
Понятно, что стандартную тему хотят использовать далеко не все, и поэтому имеет смысл выбрать что-то из коллекции WordPress. Благо, она большая.
1. В панели управления сайтом откройте Внешний вид -> Темы.
2. На появившейся странице щёлкните Добавить новую.
3. Нажмите Фильтр характеристик, в области Разметка установите флажок Адаптивный дизайн, при желании настройте другие параметры и щёлкните Применить фильтры.
4. Из предложенных тем (на момент создания статьи их 1614) выберите и установите любую, активируйте её и снова проверьте сайт сервисом Google.
5. Если всё нормально, то установка дополнительных плагинов вам не нужна, тем более что появляться адаптивных тем со временем будет всё больше и больше — спрос порождает предложение.
compmasters.my1.ru
Как создать мобильную версию для сайта, блога на WordPress
Ваш интернет ресурс можно смотреть на любом гаджете
Приветствую читателей и гостей моего блога! Сегодня мне хочется рассказать начинающим интернет предпринимателям, которые уже создали свой сайт или блог на базе CMS WordPress и подошли к мысли о создании мобильной версии своего веб-ресурса, что для этого нужно сделать, чтобы у них такая версия стала реальностью.
Другая сторона, которая мотивирует многих к созданию именно мобильной версии для своих сайтов или блогов связана с тем, что она увеличивает трафик (количество посещаемости их сайтов, блогов) из-за предрасположенности поисковых систем отдавать предпочтение тем интернет-ресурсам, которые имеют эту версию.
Признаюсь, ещё пару месяцев тому назад, когда один из читателей моего блога в комментариях к одной из статей, выразил пожелание по созданию его мобильной версии, я был не готов дать положительный ответ на такой запрос, так как сам не владел техникой получения такой версии.
Но вот несколько дней назад я изучил техническую сторону проблемы и для своего блога https://takmak51.ru/, и создал его мобильный вариант, и теперь его можно просматривать на любом из всего многообразия существующих гаджетов, и сегодня хочу поделиться этой информацией, которая поможет многим в решении данной задачи.
Итак, перейдём к конкретным действиям, необходимым для создания мобильной версии сайта, блога, работающих на так называемом движке WordPress, популярном у многих веб-мастеров. Как оказалось, создать такую версию очень просто: для этого необходимо установить плагин: WPtouch Mobile Plugin и выполнить его настройку. В видеоролике, созданном по этому случаю, я показываю, как это делается на практике.
Поделиться в соц. сетях
Share On:
About The Author
takmak51.ru
Создаем мобильную версию Вашего блога на WordPress – продолжение — Создай сайт для бизнеса
В этой заметке я продолжаю знакомить Вас с плагинами для WordPress, которые позволяют Вам создать мобильную версию блога.
Давайте рассмотрим плагин MobilePress — http://wordpress.org/plugins/mobilepress/.
После его установки и активации в меню администрирования появляется новый пункт «MobilePress», в нем содержатся два подраздела Settings и Themes.
В разделе Settings устанавливаются все параметры для плагина.
Front Page Display — в этом параметре выбирается что показывать на главной странице мобильной версии блога;
Posts Per Page — число постов (записей) на странице;
Далее идут общие настройки — General Settings:
Show Categories — показывать категории;Show Pages — показывать страницы;Show Post Tags — показывать теги;Show Post Thumbnails — показывать миниатюры изображений.
Следующая группа настроек — Comments Settings
Служит для определения возможности комментировать посты и статьи.
Posts and Pages — посты и страницы;Posts Only — только посты;Pages Only — только страницыDisable Comments — отключить комментирование.
Следующий параметр — Force Mobile Site — указывает когда отображать мобильную версию сайта, если выбран параметр Yes — всегда отображается мобильная версия, даже когда мы заходим на сайт с компьютера, если No — только для мобильных устройств.
Последний параметр Custom Mobile Themes Directory — указывает каталог для хранения тем (шаблонов) мобильной версии.
В разделе Themes мы можем выбрать тему для мобильной версии сайта и просмотреть как наш блог будет отображаться.
С плагином идет только одна тема, которая используется по умолчанию и храниться в папке /wp-content/plugins/mobilepress/themes/default.
Посмотрите как выглядит данная тема на моем тестовом сайте WordPress.
Главная станица
Страница поста
Новые мобильные темы добавляются в папку /wp-content/plugins/mobilepress/themes/.
Давайте я покажу как можно добавить новую мобильную тему.
Скачиваем архив с темой здесь.
Разархивируем, а затем копируем папку skyline со всем содержимым в папку /wp-content/plugins/mobilepress/themes/ на Ваш сервер, с помощью FTP-клиента.
Заходим в админку блога в параметры плагина MobilePress в раздел Themes и видим следующее
У нас появилась новая мобильная тема Skyline.
Щелкаем по ссылке Activate for Theme и смотрим как выглядит блог на мобильном устройстве.
Страница поста
Давайте немного изменим тему под наш блог.
Заменим логотип на нужный, для этого необходимо подготовить изображение в формате png размером 266 x 68 пикселей и сохраним его под названием logo.png.
Загрузим наш новый файл в папку /wp-content/plugins/mobilepress/themes/skyline/img на сервере.
Мы можем также изменить стандартный favicon на свой, создав его с именем favicon.gif.
И загрузив в туже папку.
Для создания favicon можно использовать вот этот сервис — http://www.chami.com/html-kit/services/favicon или подобный.
Изменить ссылки в верхнем меню можно в файле header.php в папке /wp-content/mobilepress/themes/skyline/.
Вот что у меня в результате получилось.
Вы можете попробовать самостоятельно модифицировать тему или поискать новые шаблоны в интернет.
О других плагинах, мы поговорим в следующий раз …
P.S. — Можно ли быстро сделать свой блог, не размазывая «каши» в собственной голове? Можно, но только вот так — http://sb-new.loc/go/wordpress
sitebiznes.ru
Как сделать мобильную версию сайта?
Продолжаю тему оптимизации и ускорения своего основного сайта, и теперь настало время заняться очень важным вопросом: как сделать мобильную версию сайта для этого и других моих блогов? Хотя создать мобильную версию сайта для этого блога не нужно, тут адаптивный дизайн, а вот на других, более старых сайтах, такого нет.
Это очень важный этап оптимизации сайта, так как сегодня все больше людей имеют телефоны, смартфоны и планшеты, подключенные к интернету. И если на большом мониторе ваш сайт выглядит просто прекрасно, то на телефоне его, возможно, просто невозможно будет просматривать: шрифты будут ОЧЕНЬ маленькими, а дизайн будет СИЛЬНО перекошен. Человек сразу закроет сайт, а поисковая система поставит себе галочку: ОТКАЗ!
Как проверить сайт?
Это первый вопрос, который нужно поставить себе: как проверить, оптимизирован ли мой сайт для просмотра на маленьких экранах? Тут есть два подхода: доверить анализ специальному сервису или открыть свой сайт на том же телефоне (на большом планшете даже не оптимизированный сайт, скорее всего, будет вполне читабельным).
Начнём с сервиса, и воспользуемся инструментом от Google - developers.google.com. Вот какую печальную картину имеет мой сайт:
Как показано на картинке, мой сайт на смартфоне отображается так же, как отражался бы на обычном компьютере, и поэтому читать его будет ОЧЕНЬ трудно. К тому же, как сообщил мне Google, в шаблоне сайта есть элементы, которые мешают моему сайту быстро открываться на мобильных устройствах. И вот тут требуется пояснение.
Дело в том, что на мобильных девайсах обычно используется не очень быстрый интернет, у которого чаще всего ещё есть ограничения по трафику. И поэтому ожидается, что в мобильной версии будет меньше ненужного трафика.
Как решить проблему?
Тут есть несколько вариантов.
1. Оптимизировать данный шаблон, устранить ошибки и так далее
Это не получится, так как в предыдущих статьях я описывал свои мучения и на данный момент сделал все, что мог. Но что для русского хорошо, для немца смерть. Что для обычного сайта мелочи, то для мобильного сайта очень даже критично.
Например такой совет даёт Google: Используйте удобочитаемые размеры шрифтов. Некоторым посетителям будет сложно прочесть указанные ниже фрагменты текста на вашем сайте.
Как я это сделаю? Пока не знаю, как сделать так, чтобы сайт сам определял размер экрана и подставлял нужный шрифт. Хотя, если быть точным, я знаю как это называется:
2. Поставить адаптивный шаблон
Но для меня это тоже не выход, так как полностью менять шаблон сайта я не хочу, с этим я провозился слишком долго и он мне ОЧЕНЬ нравится. Может есть плагины, которые могут внести изменения в шаблон? Поискал, ничего не нашёл, предлагается только много адаптивных дизайнов. Как вариант, можно купить ПРЕМИУМ ШАБЛОН, такие шаблоны имеют много дополнительных функций и ОБЯЗАТЕЛЬНО такой шаблон будет адаптивным.
Вывод тут можно сделать такой: когда вы только начинаете делать свой сайт, то СРАЗУ выбирайте адаптивную тему. Как ещё можно решить мою проблему?
Если вам нравится ваш шаблон, но у вас не адаптивная верстка, то ОЧЕНЬ ХОРОШИМ ВАРИАНТОМ будет сделать его адаптивным. Чтобы сделать это своими силами нужно быть программистом, поэтому самым целесообразным решением будет заказать эту услугу у профессионалов.
За небольшую сумму вам профессионально настроят шаблон, устранят все ошибки и вам не нужно будет ничего кардинально менять. Такой адаптивный дизайн, как вы понимаете, поможет еще больше полюбить ваш сайт поисковиками, что увеличить его посещаемость.
3. Мобильная версия сайта
Многие серьёзные сайты решили эту проблему старым дедовским методом: создали мобильную версию сайта и разместили его на поддомене. Когда человек заходит на сайт, специальный скрипт определяет его устройство, и если обнаруживается, что оно мобильное, посетитель перебрасывается на поддомен с мобильной версией.
Решение правильное, то технически довольно сложное, и простые блогеры никогда им не пользуются (не встречал таких:). Это не подходит и мне, я не твиттер, не фейсбук и даже не вконтакте. Поэтому мне остаётся самый последний, но самый верный и простой вариант.
4. Как создать мобильную версию сайта проще всего?
Есть такие плагины, которые создают в папке с сайтом ещё один сайт, вернее специальный шаблон для него, который будет корректно показывать содержимое сайта на мобильных устройствах. Я как то ставил себе такой и в целом он работал неплохо. Потом я его удалил, так как в папку с этим шаблоном мне залили дорвей. Но сама идея была правильной. Теперь осталось выбрать лучший вариант такого плагина, так как их много. Поищем....
Установил плагин WordPress Mobile Pack (Mobile Switcher) и сразу всё улучшилось!
Вроде всё хорошо, и проблема решена, но....
1. Не отображается реклама, плагин её режет.
2. В подвале две внешние ссылки.
Если вторую проблему можно легко решить, то первую решить будет сложно. А как сами понимаете, если сайт живёт рекламой, то такой минус критичен.
3. На большом планшете показывает всё так же, как на телефоне, узкой полосой, хотя на таком экране и обычный дизайн смотрится нормально.
Ну что же, попробую поискать что нибудь получше.
Нашёл ещё один плагин, который раньше как раз у меня стоял - WP Mobile Detector. На нём реклама отлично показывается, хотя ссылки в подвале тоже есть. Да и к тому же не отображаются картинки на сайте, а это тоже очень плохо.
Неужели нет чего то получше? Поищем...
И вот я на я нашёл САМЫЙ лучший плагин для мобильной версии сайта - WPSmart Mobile. Из всех недостатков - это только ссылки в подвале, но мы их ведь можем убрать? Правда реклама осталась только в самой статье, но это мелочи, её можно встроить в сам мобильный шаблон, вечером займусь.
Что ещё прекрасно, что даже на планшете сайт выглядит отлично, как и на моём маленьком смартфоне. Не поленился и запустил Android на виртуальной машине, чтобы вам показать (о том, как установить андроид на виртуальную машину, можно прочитать ЗДЕСЬ.:
Ещё плагин имеет три варианта шаблонов, выбор не большой, но есть. Осталась мелочь - удалить ссылки в подвале, так, на всякий случай.
Тут оказалось все не так сложно. Идём в папку с установленным плагином и открываем файл base-functions.php - путь к нему: ВАШ САЙТ/wp-content/plugins/wpsmart-mobile/themes/base/base-functions.php
<div> Site optimized for mobile devices by <a href="http://www.wpsmart.com/mobile">WPSmart Mobile</a> <a href="http://wordpress.org/">Proudly powered by WordPress</a> | <a href="#">View Full Site</a> </div>Удаляем этот кусок кода и все, ссылок в футере нет. Можно не удалять, а поставить свои ссылки. Но учтите, что при обновлении плагина всё, скорее всего, вернётся на круги своя. Или не обновляйте плагин, или всегда удаляйте.
ОЧЕНЬ ВАЖНО! В связи с тем, что google предъявляет теперь большие требования к мобильной версии сайта, именно ему нужно угодит. А он требует при своих тестах доступ в robots.txt к мобильному шаблону. Поэтому в robots.txt нужно ОБЯЗАТЕЛЬНО прописать:
Allow: /wp-content/plugins/wpsmart-mobile/themesТолько после этого тест на мобильность будет успешен:
Вот так я решил проблему с мобильной версией сайта, надеюсь, что мой опыт пригодится и вам:)
Дальнейшая доработка плагина WPSmart Mobile
Так как этот плагин плотно вошел в жизнь моих сайтов, то решил тут дописывать, как я его допиливал, пригодится потом самому вспомнить, да и другим будет полезно.
ВАЖНО! После внесения изменений не обновляйте плагин, иначе вы потеряете все внесенные изменения!
Центровка картинок. Изначально картинки в шаблоне прижимаются к левому краю. На планшете это некрасиво. Нужно вот эту секцию в css привести к такому виду:
body img { display: block; margin: 0 auto; }СОВЕТ ВЕБМАСТЕРУ: Умение зарабатывать в интернете - это только пол дела, вторая половина - это умение ВЫГОДНО обналичивать электронные деньги. Вот список офшорных банковских карт, на которые можно выводить средства и потом снимать с них хрустящие купюры:
1. Epayments - можно открыть счет в долларах, евро и рублях. Формально банка нет, юридический адрес в Лондоне, но можно получить реквизиты банка в Латвии.
2. AdvCash - Офшорный банк находится в Белизе, можно открыть счет в долларах, евро, фунтах и рублях.
3. Payeer - Штаб квартира этой платежной системы находится в Грузии, тут так же можно открыть счет в долларах, евро и рублях.
4. Capitalist - Можно создать счета в долларах, евро и рублях. Низкие тарифы на вывод. Компания зарегистрирована в юрисдикции Британских Виргинских Островов.
Во всех случаях можно заказать банковскую карту, которую пришлют вам по обычной почте. Активируете ее и идете снимать деньги банкомат! Тарифы смотрите на сайтах платежных систем.
zmoe.ru
