Дневник Предпринимателя "inDV"
УстановитеFlash player
On-Line Радио от автора Дневника Предпринимателя "inDV" для действующих и начинающих предпринимателей и бизнесменов.

Формат радиостанции: All Talk

Жанры: House, Trap, Dubstep, Drum&Bass

Сейчас в эфире: Загрузка ...

  • Подписаться на статьи

    Введите свой Email-адрес:

    Подписавшись, вы будете получать все новые статьи себе на почту сразу после их публикации.
Рубрики: Интернет-Бизнес | Разработка | 16.01.2017 | 17:31 | 498 Просмотров

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

Доброго времени суток, уважаемые читатели моего блога! В сегодняшней статье я расскажу и наглядно покажу, как сделать мобильную версию сайта на WordPress. Это будет пошаговая статья с живым примером, я “в прямом эфире” буду проводить работу над этим сайтом. Я не буду устраивать банальщину и рассказывать вам, как перенаправить посетителя с домена на поддомен, созданный для мобильных устройств – это уже не круто. 🙂 Мы реализуем переход на мобильный шаблон, тогда ваш дизайн для десктопа (ПК) будет одним, а для мобильных устройств (смартфонов, планшетов) совсем иным.

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

Как сделать мобильную версию сайта? Вопрос, который волнует всех староверов-разработчиков. Разница дизайнов лишь в формате отображения. У десктопной версии, как это часто бывает, размеры объектов задаются в пискелях, у мобильной версии в процентах.

Я сделаю скидку на понимание большей части читателей, ведь половина не разбирается в кодах и в файле Style.css. Все приходит с опытом, поэтому для первого случая мы найдем адаптированный шаблон вордпресс в стандартном поиске раздела “Внешний вид”/”Темы”. Да, тогда вам не составит огромного труда исправить его, добавив в него логотип, счетчиков посещаемости и изменив немного расцветку.

Нажимаем на кнопку “Добавить новую”.

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

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

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

Работы на поддомене.

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

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

На смартфоне выглядит так:

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

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

Плагин для включения мобильной версии.

То, что рекомендуют другие блогеры – абсурд чистой воды. Мало того, что статьи, грубо говоря, списаны, они еще и не достоверны. Единственный и неповторимый плагин, который может включить мобильный шаблон исключительно на моб-устройствах – это Mobile Press. Он легко находится в стандартном поиске WordPress в разделе “Плагины” – “Добавить новый”.

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

Активируйте его и сразу идите прямиком в файловый менеджер вашего хостинга. Найдите папку, где должны храниться шаблоны, которые включит этот плагин. Путь к папке следующий: ваш сайт/public_html/wp-content/plugins/mobilepress/themes.

Так вот, вам нужно перенести туда шаблон, который вы нашли. Я просто скопирую из (public_html/wp-content/themes) в (public_html/wp-content/plugins/mobilepress/themes).

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

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

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

Итак, по всем аспектам подробнее.

Front Page Display – функция, позволяющая выбрать тот тип постов, которые будут отображаться на главной странице. Можно выбрать последние записи или одну из страниц.

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

General Settings – что вы хотите иметь на главной странице в дополнение к записям? Играет роль боковой колонки, но не стоит ничего трогать, поскольку колонки у шаблонов настраиваются таким образом, чтобы в любой версии можно было менять содержимое в одном разделе “Внешний вид” – “Виджеты”.

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

Force Mobile Site – если вы желаете, чтобы ваш мобильный дизайн отображался только на мобильных устройствах, нажмите NO, если хотите, чтобы он работал еще и на десктопе, включайте. Я не рекомендую включать, ведь версия десктопа должна оставаться красивой.

Custom Mobile Themes Directory – это путь к шаблону, не меняйте его, если не разбираетесь.

Включаем разделение шаблонов.

Ну, а теперь зайдите в раздел “MobilePress” – “Themes” и активируйте тему, которую вы недавно перенесли.

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

Теперь, чтобы проверить работоспособность, зайдите в раздел “Внешний вид” – “Темы” и активируйте любую другую тему, можно даже стандартную, без разницы. Я активировал эту:

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

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

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

В мобильном же браузере выглядит так:

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

Вот так все просто. На этой ноте те, кто не желает получить ответ на вопрос “Как сделать мобильную версию сайта wordpress самостоятельно с нуля?”, может покинуть статью. А для идейных и трудолюбивых я продолжу.

Создать мобильную версию с нуля.

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

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

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

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

Понятно, как можно использовать контейнеры? Ни один объект не выйдет за рамки сайта. В левом варианте видно, что все объекты находятся в одном контейнере, а содержимое распределяется по вертикали по порядку. В середине можно увидеть контейнеры, которые расположены внутри главного контейнера, а в них объекты располагаются по ширине. Например размер контейнера 50 пикселей, а внутри два объекта по 20 пикселей. Если я их распределю по вертикали, то справа останется еще много места (30px), значит, нужно настроить горизонтальное распределение, тогда новые объекты будут находиться справа, а как контейнер закончится, автоматически переноситься вниз и т.д. Возможные варианты я обозначил. А теперь давайте обратимся к коду, так как сделать мобильную версию сайта с нуля можно только за счет него, более того, вы будете знать, какой код за что отвечает.

Файл Header.php

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


<body>
<div id="conteiner">

<div id="header">
<h1>Название блога</h1>
Описание блога
</div>
	
<script type="text/javascript"> <!-- Скрипт, приводящий в работу меню, при нажатии оно открывается вниз -->
$(document).ready(function(){
 $('.spoiler_links').click(function(){
  $(this).next('.spoiler_body').toggle('normal');
  return false;
 });
});
</script>

<div class="spoiler_links">меню</div>
<div class="spoiler_body">

<div id="menu">
<ul>
<li><a href="ссылка" rel="nofollow">страница или рубрика</a></li>
<li><a href="ссылка" rel="nofollow">страница или рубрика</a></li>
<li><a href="ссылка" rel="nofollow">страница или рубрика</a></li>
<li><a href="ссылка" rel="nofollow">страница или рубрика</a></li>
<li><a href="ссылка" rel="nofollow">страница или рубрика</a></li>
</ul>
</div>

</div>

Файл Style.css

Что касается открытого контейнера, то закрываю я его в файле Footer.php таким образом:

</div>

Теперь нам нужно прописать в файле style.css параметры отображения шапки, спойлера и меню.

Основа и главный контейнер:


body
{
background: url('images/background.jpg') no-repeat center 0; /* Фон */
background-attachment: fixed; /* Фон фиксируется */
background-size: 100%; /* Устанавливается по ширине экрана */
margin: 0px auto 0px;
padding: 0px;
	}

#conteiner
{
width: 98%; /* Размер контейнера по отношению к размеру экрана */
text-align:left;
margin: 0px auto 0px;
padding: 0px;
}

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

#header
{
background: linear-gradient(to top, rgba(54, 112, 151, 0.7), rgba(85, 143, 183, 0.7)); /* Фон шапки - использую градиент */
border-left: 1px solid rgba(125, 155, 180, 0.7); /* Граница слева */
border-bottom: 1px solid rgba(34, 48, 58, 0.7); /* Граница снизу */
border-top: 1px solid rgba(162, 180, 194, 0.7); /* Граница сверху */
border-right: 1px solid rgba(57, 84, 104, 0.7); /* Граница справа */
height: auto; /* Высота устанавливается автоматически */
padding: 10px 10px 10px 10px;
margin: 0px 0px 0px 0px;
color: #ffffff; /* Цвет текста */
text-align: center; /* Текст по середине */
font-size: 1.6em; /* Размер шрифта */
text-shadow: #1b445f 1px 1px 1px; /* Тень шрифта */
}

#header h1
{

border-bottom: 1.2px solid #5892ba; /* Граница снизу */
padding: 0% 0% 2% 0%;
margin: 0px 0px 1.7% 0px;
text-align:center;
color: #ffffff;
text-shadow:#1b445f 1px 1px 1px;
font:1.6em/1em tahoma, Times new roman, Arial, Helvetica, sans-serif; /* Шрифты */

}

Меню со спойлером:

.spoiler_body
{
display:none;
font-style:normal;
}

.spoiler_links
{
cursor:pointer;
text-decoration:none;
height: auto;
padding: 30px 0px 30px 0px;
margin: 0px 0px 0px 0px;
color: #ffffff;
background: linear-gradient(to top, rgba(54, 112, 151, 0.7), rgba(85, 143, 183, 0.7));
border-left: 1px solid rgba(125, 155, 180, 0.7);
border-bottom: 1px solid rgba(34, 48, 58, 0.7);
border-top: 1px solid rgba(162, 180, 194, 0.7);
border-right: 1px solid rgba(57, 84, 104, 0.7);
border-radius: 0px 0px 0px 0px;
text-align:center;
font-size: 20px;
}

#menu
{ 
background:rgba(250, 250, 250, 0.0);
border-left: 0px solid rgba(250, 250, 250, 0.8);
border-bottom: 0px solid rgba(88, 91, 93, 0.8);
border-top: 0px solid rgba(255, 255, 255, 0.8);
border-right: 0px solid rgba(120, 126, 131, 0.8);
border-radius: 0px 0px 0px 0px;
text-align: left;
margin: -13px 0px 0px 0px;
padding: 1px 0px 11px 0px;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
}

#menu ul
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#menu li
{ 
border-top: 0px solid #d6b1e6;
border-bottom: 0px solid #d6b1e6;
border-left: 0px solid #d6b1e6;
border-right: 0px solid #d6b1e6;
display: list-item;
font-weight:bold;
margin: 27px 0px 0px 0px;
}

#menu a:link, #menu a:visited
{
background: linear-gradient(to right, rgba(54, 112, 151, 1.0), rgba(54, 112, 151, 0.7), rgba(85, 143, 183, 0.0));
border-left: 1px solid rgba(125, 155, 180, 0.7);
height: auto;
padding: 10px 33% 10px 20px;
margin: 0px 0px 0px 0px;
color: #ffffff;
font: tahoma, Times new roman, Arial, Helvetica, sans-serif; 
text-shadow:#1b445f 1px 1px 1px;
font-size: 20px;
text-align: left;
text-decoration: none;
}

#menu a:hover, #menu a:active
{ 
background: linear-gradient(to right, rgba(54, 112, 151, 0.7), rgba(54, 112, 151, 0.5), rgba(85, 143, 183, 0.0));
border-left: 1px solid rgba(125, 155, 180, 0.7);
height: auto;
padding: 10px 33% 10px 20px;
margin: 0px 0px 0px 0px;
color: #ffffff;
font: tahoma, Times new roman, Arial, Helvetica, sans-serif; 
text-shadow:#1b445f 1px 1px 1px;
font-size: 1.8em;
text-align: left;
text-decoration: none;
}

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

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

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

Заключение.

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

C этой статьей также читают следующие:

Оставить комментарий

Наверх