- Як зробити мобільну версію WordPress сайту
- Як налаштувати плагін WPtouch
- Як вивести рекламу на мобільному на початку і кінці статті
Наша команда-партнер Artmisto
Всім привіт!
До 21 квітня залишилося трохи більше тижня, щоб оптимізувати свій сайт під мобільні пристрої. За цей час навряд чи вийде у програміста замовити і отримати готову мобільну версію для сайту, та й не у всіх можуть бути гроші на це. У цій статті я розповім, як зробити мобільну версію сайту за допомогою плагіна WPtouch Mobile Plugin.
Як перевірити оптимізований сайт для мобільних пристроїв і як він відображається на пристроях з різним розширенням екрану, читайте за посиланням http://inetsovety.ru/proverka-optimizatsii-sayta-pod-mobilnye/
до змісту ↑Як зробити мобільну версію WordPress сайту
За допомогою плагіна WPtouch Mobile Plugin навіть новачок зможе зробити мобільну версію для свого WordPress сайту, якщо встановлений шаблон не адаптивні. Не дивлячись на те, що плагін має дві версії безкоштовну і платну, базової версії цілком достатньо для середнього сайту. У тому випадку, коли у вас крутий сайт, який приносить нормальний дохід, для нього найкращим рішенням буде замовити програмістам мобільну версію, а не купувати Про версію WPtouch за 59 доларів.
Установка плагіна стандартна. У рядок пошуку вводимо назву WPtouch Mobile Plugin і встановлюємо його. На цьому скрині дивіться покрокові дії по встановленню:
Як тільки ви активували плагін, у сайту з'явилася мобільна версія. Перевірка зручності перегляду на мобільних пристроях від Гугла показує «Відмінно! Сторінка оптимізована для мобільних пристроїв ». Більше можна нічого не робити. Все працює. Зайдіть на свій сайт зі свого телефону і подивіться.
Для тих, хто бажає покопатися в налаштуваннях, а також додати рекламу в плагін WPtouch, розглянемо його функціонал більш докладно.
до змісту ↑Як налаштувати плагін WPtouch
В адмінці в лівій колонці з'явився пункт WPtouch.
Перший підпункт «Що нового», можна не дивитися. У ньому англійською розповідається про нові оновлення і поліпшення в плагіні, які вносять його розробники.
Другий підпункт «Базові настройки». Він має дві вкладки: «загальні» і «сумісність». На вкладці «загальні» можна змінити назву сайту, вибрати початкову сторінку, відключити посилання перемикання до повної версії. Налаштування на вкладці «сумісність» нам не цікаві, тільки користувачі Про версії можуть вибрати, які плагіни будуть завантажуватися з мобільною версією, а також додати шорткоди.
Третій пункт - «Теми і розширення». Тут нам робити нічого. У безкоштовної версії є тільки одна тема - Bauhaus, а з розширень взагалі нічого не доступно.
Йдемо далі. Четвертий підпункт - «Параметри теми». Він має аж 5 вкладок «Загальні», «Фірмова символіка», «Закладка піктограм», «Режим веб-додатки», «Реклама».
На першій вкладці «Загальні» зверніть увагу на наведене нижче висновок кількості записів, поекспериментуйте з ескізами, виберіть які елементи показувати (коментарі, слайдер). На жаль, для безкоштовної версії не доступний висновок блоку схожих записів. На вкладках «Фірмова символіка» і «Закладка піктограм» можна змінити кольори та емблеми теми.
У четвертому пункті «Меню» виберіть, які сторінки меню показувати, а які ні. До кожній сторінці можна додати значки:
Як ви помітили, в безкоштовної версії можна додати рекламу, яка буде відображатися на мобільному. Це обмеження можна обійти, додавши в файл теми рекламний код. Мінус у цього способу наступний - при оновленні плагіна рекламні коди потрібно додавати заново.
Хочу звернути вашу увагу на те, що для телефону потрібно створювати рекламні блоки свого формату. У Адсенс є стандартний блок 320 * 100. Можна створити свій з шириною 320, а висотою 300. Поекспериментуйте і подивіться результат.
У випадку з тізерній рекламою, можна створити блок шириною все ті ж 320 пікселів. А в ньому розташувати 3 оголошення в стовпець з розміром картинки 50 * 50. Виглядає відмінно. Ще я додала посилання «читати далі», яка виводиться праворуч від тізера.
до змісту ↑Як вивести рекламу на мобільному на початку і кінці статті
Тепер поясню куди ж додавати коди. У безкоштовної версії плагіна WPtouch є всього одна тема Bauhaus. Зайдемо в папку з нею за наступним шляхом сайт.ru / public_html / wp-content / plugins / wptouch / themes / Bauhaus / default
І ви побачите список файлів, які відповідають за відображення сайту на мобільних пристроях:
Нас цікавить файл single.php. У нього ми і буде додавати коди.
Перший блок Адсенс 320 * 100 я додала після виведення мініатюри, відразу після цього коду:
<Div class = "post-page-thumbnail"> <? Php the_post_thumbnail ( 'large', array ( 'class' => 'post-thumbnail wp-post-image')); ?> </ Div>Додати рекламу після кнопок соцмереж мені не вдалося, якщо ви знайдете рішення, напишіть в коментарях.
Другий блок Адсенс 320 * 300 в кінець поста, перед кодом:
<? Php get_template_part ( 'related-posts'); ?>А код тізеркі перед виведенням коментарів:
<? Php if (comments_open () || wptouch_have_comments ()) {?>Щоб відвідувачі з мобільних пристроїв зараховувалися в статистиці, додайте коди лічильників в цей файл. Я не знайшла кращого місця і додала код перед рядком:
<? Php get_footer (); ?>Ось власне і все. Не забувайте, рекламу доведеться додавати заново після поновлення плагіна. Збережіть собі на комп'ютер цей файлик з рекламними кодами.
Чекаю на ваші коментарі.
Php the_post_thumbnail ( 'large', array ( 'class' => 'post-thumbnail wp-post-image')); ?Php get_template_part ( 'related-posts'); ?
Php if (comments_open () || wptouch_have_comments ()) {?
Php get_footer (); ?
