Вот и пришёл черёд написать статью о том, как сделать админку для вашего сайта, для вашей лендинг страницы. Админ панель даёт возможность редактировать текст, картинки и др на странице не имея знаний в программировании, не имея знания в коде.
Ну что ж, давайте начнём =)
Недавно я закончил как раз так и подобный заказ. Я делал админ панель для лендинг страницы одной из стоматологической клиники моего города. Вот ссылка на сайт.
Возможна в момент чтения этой статьи, эта ссылка будет уже не доступна, так как работу я уже сделал, и возможно я удалю работу с моего хостинга. Но я буду выкладывать здесь скриншоты, чтобы максимально было всё понятнее для вас.
Вот так выглядит страница после того как мы переходим по ссылке...
Опускаемся ниже и видим то что выше на скриншотах. Наша задача сделать админ панель для данного сайта (лендинг страницы), дать возможность редактировать страницу так же легко, как отредактировать Word документ =)
Вообще изначально сайт был без какого либо движка, то есть html, css, js и никакой админ панели вообще. Сначала мы перенесём сайт на движок wordpress.
Я не буду в данной статье подробно описывать как перенести сайт на Wordpress, но я расскажу вам об этом подробнее чуть позже, думаю в следующей статье. Вкратце, мы качаем с официального сайта Wordpress, установочные файлы, распаковываем их на вашем хостинге. Далее проходим всю установку... После того мы видим голый сайт wordpress на вашем хостинге, начинаем натягивать наш лендинг на WP (wordpress).
Повторюсь, что скоро я расскажу вам подробнее, отдельной статьёй, как это сделать. Но сейчас этот пункт я пропущу.
В итоге мы имеем, файлы header.php, в котором содержится шапка нашего лендинга, в index.php основная часть лендинга, и в footer.php нижний блок. На данном этапе наш лендинг натянут на wordpress, но не имеет никакой возможности редактирования содержимого.
Теперь, мы переходим в админ панель - плагины - добавить новый, и в поиске набираем: Redux Framework.
Как вы видите на скрине выше, у меня уже активен этот плагин.
Далее, мы переходим в плагины, находим в списке наш скаченный плагин. Активируем его, и жмём на кнопку "Активировать демо режим". После всех данных манипуляций, слева в меню появляется Sample Options.
Если вы перейдете в это меню, то вы увидите множество кнопочек и режимов. Редактирование текста, выбора и загрузки изображений, изменения цвета и многое другое. Это всё демо режим. Это всё вы сможете использовать для будущей вашей админ панели вашего сайта.
Теперь перейдём к более серьёзным действиям. Для начала перейдём в папку wp-content/plugins/redux-framework/ на вашем хостинге.
И папку sample копируем по следующему адресу wp-content/themes/ваша_тема/
Далее открываем файл functions.php вашей темы и добавляем строчку: require_once (dirname(__FILE__) . '/sample/barebones-config.php');
После этого вы увидите слевой стороны в консоле ещё один Sample Options. Один из них демо, второй, который мы только что добавили. В нём и будем работать. Демо режим пока не отключаем, он нам будет помогать в работе построения админ панели.
Переходим в папку wp-content/plugins/redux-framework/sample/ и открываем файл sample-config.php. В этом файле хранится весь код Sample Options демо режима. То есть, мы будем копировать нужный нам код с этого файла в рабочий файл wp-content/themes/ваша_тема/sample/barebones-config.php
Давайте приступим. Для начала откроем рабочий файл barebones-config.php, который находится в каталоге вашей темы (мы скопировали его туда). Найдём строчки:
'title' => _( 'Basic Filds', если мы вместо Basic Filds напишем например "Главная страница", то в рабочем меню Sample Options увидим следующее:
Опускаемся чуть ниже
И вместо Checkbox пишем "Меню". Переходим в консоли в рабочий Sample Options и видим следующее:
В пункте меню мы дадим администратору возможность редактировать верхнее меню на сайте
Для этого в демо файле sample-config.php находим строчки текстового редактора
Берём чать кода
array(
'id' => 'text-example',
'type' => 'text',
'title' => __( 'Text Field', 'redux-framework-demo' ),
'subtitle' => __( 'Subtitle', 'redux-framework-demo' ),
'desc' => __( 'Field Description', 'redux-framework-demo' ),
'default' => 'Default Text',
),
И добавляем его в рабочий файл barebones-config.php. Вот как это получилось у меня
ну и немного подправим его
изменим id, он нам понадобится для вывода функции. id вы можете сделать любым, главное чтобы он был уникальным и не совпадал с другими id.
Теперь в консоле в рабочем sample options мы видим с вами следующее
Не обращайте внимание на то что ниже пункта "Меню", так как скрины я делаю с уже готовой админки.
Далее нам нужно добавить функцию в коде сайта, для того чтобы можно было редактировать номер телефона в шапке сайта. В файле header.php у нас имеется html код, который мы использовали когда натягивали лендинг на wordpress. В этом коде нужно найти строчки, которые выводят номер телефона. У меня это выглядит так:
Ну и нам остаётся вместо номера телефона прописать функцию:
<?php echo $redux_demo['contact-phone']; ?>
Да, и не забудьте в этом же файле header.php в самом верху прописать функцию global $ redux_demo ;
Вот выше скрины, что должно получится. Ну и теперь мы можем перейти в консоль, в рабочее options sample и в окне "телефон" вести номер телефона, и обязательно сохранить изменения. Переходим на наш сайт (лендинг страницу) и смотрим что в верхнем меню в графе телефон наш введённый номер. Если мы снова перейдём в редактор и поменяем номер, то и на сайте он снова изменится. Таким способом мы уже добавили в админку возможность изменения номера телефона на сайте без знания каких либо знаний программирования =)
Теперь таким же способом мы продолжаем создавать админку для каждой части сайта.
Вот, как вы видите у меня получилось такое меню =) Я повторюсь, в демо файле sample-config.php ищите то что вам нужно (выбор цвета, загрузка изображения, кнопочки, чебоксы) и просто копируйте в рабочий файл barebones-config.php, при этом редактируя id (каждый id для каждого текстового редактора, для каждой кнопки и т.д.) строго уникальный!
Я постарался в этой статье максимально понятно рассказать о том, как сделать админку для лендинг страницы. Если у вас есть вопросы, пишите в комментариях и я обязательно помогу вам.
В следующей статье я расскажу как натянуть готовую вёрстку (сайт) на Wordpress
Всем спасибо!