Рубрики
WordPress Разработка

Создание WordPress-проекта в Eclipse PDT

Ранее мы уже установили веб-сервер, на него поставили WordPress, установили среду разработки Eclipse PDT. Теперь можно начинать работу с кодом. Например мы хотим внести какие-то изменения в стандартную тему WordPress — Twenty Eleven. Чтобы делать это с комфортом, в Eclipse создаем новый PHP-проект.

Создание PHP-проекта

  • Открываем Eclipse. Меню File -> New -> PHP Project:
    Создание PHP-проекта
    Создание PHP-проекта

    Вводим имя проекта (Project name) — пусть совпадает с названием темы — Twenty Eleven.
    Раздел Contents. Выбираем опцию Create new project in workspace (создать новый проект в рабочем пространстве).
    Раздел PHP Version. Выставляем Use project specific settings: PHP 5.1/5.2. Какое значение установлено по дефолту не всегда помнишь, поэтому предпочитаю явно указывать версию PHP на которую рассчитан проект.
    Раздел Project Layout. Выбираем Use project as source folder. На самом деле мы не будем использовать папку проекта для хранения исходного кода, но настройку выбираем именно такую )
    Далее сразу жмем Finish. Проект добавился.

  • Открываем свойства проекта (правый клик на имени проекта, в меню выбрать Properties) и переходим в раздел PHP Build Path:
    Настройка Build Path (1)
    Настройка Build Path (1)

    Небольшая справка. В Eclipse есть два понятия: Build Path и Include Path. В Build Path находятся все ресурсы, содержащие исходный код проекта, а в Include Path содержатся все дополнительные библиотеки. В нашем случае исходный код нашего проекта располагается в «Папка установки WordPress»\wp-content\themes\twentyeleven. Эту папку мы и должны добавить в Build Path. Нажимаем «Link Source…», находим расположение папки twentyeleven:

    Настройка Build Path (2)
    Настройка Build Path (2)

    Нажимаем Finish. Папка twentyeleven теперь добавлена к проекту.
    Почему выбран такой метод? Во-первых редактируя код на прямую, вы сразу можете увидеть результат (открыв сайт в браузере). Во-вторых папка с исходным кодом, оказывается свободна от служебных файлов Eclipse.

  • Снова возвращаемся к свойствам проекта, раздел PHP Include Path, вкладка Libraries (библиотеки):
    Настройка Include Path (1)
    Настройка Include Path (1)

    Библиотекой для нас является исходный код WordPress, т.к. любая тема или плагин, обязательно используют WordPress API. Нажимаем «Add Library…»:

    Настройка Include Path (2)
    Настройка Include Path (2)

    Выбираем User Library и далее Next.
    Пользовательские библиотеки пока не созданы:

    Создание библиотек (1)
    Создание библиотек (1)

    Нажимаем «Configure…», чтобы создать новую. В открывшемся окне нажимаем «New…», и вводим название библиотеки:

    Создание библиотек (2)
    Создание библиотек (2)

    Здесь есть нюанс.  Мы не будем добавлять все файлы WordPress, нам нужны только две папки: wp-admin и wp-includes. Поэтому создаем две библиотеки: WordPress Admin и WordPress Includes.
    Теперь к названиям библиотек нужно привязать физические папки. Для этого используем кнопку «Add External Folder…». В результате получаем вот такой набор библиотек:

    Создание библиотек (3)
    Создание библиотек (3)

    Теперь добавляем их к проекту:

    Настройка Include Path (2)
    Настройка Include Path (2)
  • В результате что же мы получили? Давайте откроем один из файлов темы —  functions.php. Наведите мышкой на первую попавшуюся функцию (add_action()), и при этом зажмите CTRL — имя функции выделится как ссылка. При нажатии откроется окошко, в котором будут указаны все файлы где были найдены определения функции с таким именем:
    Include Path в работе (1)
    Include Path в работе (1)

    Выбираем самый первый, и затем происходит невероятное Eclipse открывает нужный файл из библиотеки WordPress и переносит нас к коду функции:

    Include Path в работе (2)
    Include Path в работе (2)

    Думаю, идею вы уже поняли. Любая функция WordPress, php-функция, ваша собственная функция может быть найдена таким способом. Да и не только функции, но и классы, константы, переменные.
    Таким образом вы работаете не над отдельным файлом, а действительно над WordPress-проектом, в любой момент вы можете посмотреть код интересующей вас функция, какие аргументы она принимает, что получается на выходе. Причем, для получения справки иногда достаточно просто навести мышь на название функции. Вот например всплывающая справка по функции function_exists():

    Include Path в работе (3)
    Include Path в работе (3)

    Вы еще работаете в обычном текстовом редакторе?! Тогда мы идем к вам )

  • Ну и последний штрих, чтобы закончить с настройкой проекта. Вы наверное обратили внимание, что многие файлы в PHP Explorer отображаются с восклицательным знаком. В данном случае Eclipse сообщает нам об ошибках в html-коде. На самом деле это не ошибки, а специфика иерархии шаблонов WordPress. Например открывающий тег body у нас находиться в header.php, а закрывающий в footer.php — для валидатора это ошибка. Чтобы восклицательные знаки не мозолили глаза, настраиваем валидатор на уровне проекта: Project Properties -> Validation -> HTML Syntax, или для всех проектов сразу: Windows -> Preferences -> Web -> HTML Files -> Validation. Настройки выставляем в соответствие со следующим скриншотом:
    Настройка HTML validation
    Настройка HTML validation

    Также можно вообще полностью отключить валидацию html в php-файлах (мне этот вариант нравится больше всего). Открываем Windows -> Preferences -> Validation  и отключаем HTML Syntax Validator (for PHP Files):

    Отключение HTML validation в php-файлах
    Отключение HTML validation в php-файлах
  • Теперь вы готовы к редактированию файлов темы.
    Но прежде чем начать, очень рекомендую ознакомиться на сайте codex.wordpress.org с инструкцией по написанию плагинов, а также с инструкцией по созданию тем и с инструкцией по созданию дочерних тем. Создание дочерней темы рекомендуется, когда вы планируете внести небольшие изменения. Например немного изменить стили, добавить пару php-функций и т.п. Если же планируете глобальную перестройку, то можете редактировать тему напрямую, используя существующий код в качестве базы и постепенно заменяя его своим.
    На этом все. Успехов!

7 ответов к “Создание WordPress-проекта в Eclipse PDT”

Подскажите как настроить PHP проект с удаленного сервера, что то не могу найти этого в новом Eclips 4.2.1

Спасибо за подробное описание. Если бы я пытался постичь то же самое на офф. ресурсе — оченна трудно было бы. А главное долго.
Еще раз спасибо.

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *


Срок проверки reCAPTCHA истек. Перезагрузите страницу.