CodeLobster IDE — создаём блог на WordPress

CodeLobster IDE — создаём блог на WordPress

18 апреля 2018

Обзор CodeLobster IDE — мультиплатформенной среды разработки на примере работы с WordPress.

Топ 10 продающих лендингов для Вордпресс

Система управления сайтом WordPress — это лучший выбор для тех, кто решил завести свой личный блог или сайт портфолио.

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

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

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

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

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

Конкретно для того, чтобы заниматься сайтостроением на WordPress, я выбрал удобную и лёгкую для освоения среду разработки — CodeLobster IDE.

В этой статье изучим работу с CMS WordPress в CodeLobster IDE.

Установка WordPress с помощью мастера CodeLobster IDE

Интересной и полезной особенностью моей IDE является возможность развернуть проект автоматически и начать работать с WordPress буквально через несколько минут.

Нам не нужно искать официальный сайт в интернете и скачивать последнюю стабильную версию CMS, всю заботу о создании и настройке сайта берёт на себя IDE.

Итак, давайте начинать. Нам понадобится HTTP сервер Apache и сервер баз данных MySQL, я в данной статье использую для этого комплект утилит для веб-разработки XAMPP.

Запускаем Codelobster и переходим в главное меню программы. Далее выбираем пункт меню «Файл» «Новый»  «Проект».

Теперь нужно заполнить поля в появившемся диалоговом окне. Выбираем тип создаваемого проекта — «Создать пустой WordPress сайт».

 

Сразу же придумаем название проекта и введём его в поле «Имя проекта».

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

 

 

В результате CodeLobster создаст папку с именем «wordpress-blog» в директории «htdocs» сервера Apache, также мы сможем управлять сайтом используя данный URL — «http://localhost/wordpress-blog/».

Нажимаем «Ок» и идём далее.

Следующее диалоговое окно — это базовые настройки доступа к серверу баз данных. Нужно ввести имя базы данных, а так же правильные логин и пароль к MySQL, чтобы IDE могла создать и корректно заполнить базу данных для сайта в процессе установки CMS.

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

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

Осталось нажать кнопку «Finish» и дождаться, пока CodeLobster IDE установит WordPress.

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

Проверим, как работает наш сайт — вводим URL «http://localhost/wordpress-blog/» в адресной строке браузера.

Как можно убедиться, сайт работает отлично!

Переходим по ссылке «http://localhost/wordpress-blog/wp-login.php», вводим имя пользователя и пароль администратора, чтобы войти в админ часть.

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

Снова возвращаемся в IDE, немного подредактируем наш сайт. Откроем файл header.php и добавим логотип вместо заголовка сайта.

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

Отыщем в коде строчку и удалим её:

<?php bloginfo( 'name' ); ?>

Вместо удалённого сниппета вставим HTML тег, так, как на изображении ниже.

<img src="/wordpress-blog/wp-content/themes/twentysixteen/images/codelobster-logo-1.jpg" />

В значении атрибута «src» прописан путь к нашему логотипу. Теперь сохраняем изменения — жмём сочетание клавиш Ctrl + S.

Посмотрим, чего мы достигли. Откроем в браузере адрес «http://localhost/wordpress-blog/» и обновим страничку.

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

CodeLobster IDE имеет все необходимые инструменты, не только для программирования на PHP, но и для редактирования HTML разметки, CSS стилей и JavaScript.

Так что, можно теперь изменить цвет шрифтов или добавить фоновое изображение. Всё зависит от вашего креатива и фантазии.

Всё самое новое и интересное я публикую в своём Телеграм-канале. Подписывайтесь!

  Гостевой пост
Добавить комментарий

Услуги фрилансеров по фиксированной цене — 500 р.
Подробнее