Как редактировать файлы WordPress темы с Dreamweaver

Автор:
Nurlan Kemelbekov

Если вы читали первую часть этой серии, вы должны иметь рабочую копию WordPress на вашем компьютере или, по крайней мере, вы знаете, как его настроить. В этой статье, я покажу, как редактировать файлы WordPress темы с Dreamweaver.

Поскольку WordPress темы включают сложные PHP коды для управления контентом, отображаемом на странице, как правило, начинающему вебмастеру лучше начать работу с существующей темой и редактировать по своему CSS и HTML, пока не понравится, как она выглядит. Создание темы с нуля, безусловно, выполнимо, но это требует много времени и знаний, чем просто редактирование уже созданной темы.

Кратко пройдем пройденный материал. Скачать и установить программное обеспечение WampServer (Запуск WordPress локально с WampServer). Установить WordPress.

Анатомия темы сайта

Файлы темы хранятся внутри папки «themes», которая находится внутри «wp-content» в основной папке WordPress. Вы найдете WordPress темы, например, в D: \ WAMP \ WWW \ wordpress \ WP-Content \ themes.
Вы увидите здесь папку под названием «TwentyTen». Twenty Ten является темой по умолчанию, которая поставляется вместе с WordPress, и это хорошая отправная точка для редактирования и разработки темы. Но вместо того чтобы возиться с исходными файлами темы Twenty Ten, лучше сделать дубликат, поэтому рекомендую скопировать эту папку и назвать ее » CreativePro «.

Выполните следующие шаги, чтобы внести изменения в этот файл и включить эту новую тему в панели WordPress администрации:
1. В style.css файле, изменить «Theme Name» на » CreativePro  «. Обратите внимание, что вы должны оставить «Theme Name:» на месте для того, чтобы WordPress признал это в качестве темы. Другими словами, вы измените «Theme Name: Twenty Ten» на «Theme Name: My Creative themes «.
2. Измените «Theme URI» на http://maks-1.com (или URL вашего выбора.)
3. Изменить Author на «Я и WordPress» (или как вы хотите).
4. Сохраните файл.
5. Теперь перейдите в WordPress-админ панель, введя http://localhost/wordpress/wp-admin/ в адресной строке веб-браузера.
7. В левой панели навигации щелкните кнопку внешний вид. После этого вы попадете на страницу Управление темами. Вы заметите, что ваша новая тема My Creative themes появилась.
8. Нажмите на ссылку «Активировать» новую тему My Creative themes. My Creative themes в настоящее время перешла в верхнюю часть страницы, в качестве новой активной темы.

Управление темой

Вы можете создать свой собственный скриншот для этой темы. Просто создайте 300 пикселей х 225 пикселей графический файл; сохраните его как «screenshot.png» в папку новой темы.

Запуск WAMP и открыть Dreamweaver.
Прочитайте предыдущую статью Как подключить WordPress к Adobe Dreamweaver, если вам нужно освежить свою память, а если Вам нужен более простой метод редактирования, рекомендую прочитать статью «Как настроить CSS темы WordPress в GoogleChrome«.

Редактирование темы WordPress не всегда легко. Так как любая конкретная страница на блоге, фактически является комбинацией различных файлов, и знать, какой файл определяет, какую-то часть страницы не является особенно очевидной.

В Dreamweaver CS6 имеется интуитивный способ для просмотра и редактирования темы, который позволяет просматривать блог непосредственно в Dreamweaver и увидеть полностью собранные страницы WordPress в режиме Интерактивный просмотр. Лучше всего то, что Dreamweaver позволяет увидеть, какие элементы стили CSS соответствуют данной странице и позволяет изменять стиль.

Вам нужно выполнить несколько шагов, чтобы редактировать файлы темы WordPress с Dreamweaver:
1. В панели Dreamweaver, найти и открыть файл index.php в папке WordPress. Этот шаг может привести к путанице, потому что, если вы посмотрите внимательно, есть несколько index.php файлов: один внутри каждой папки темы, один внутри самой папки темы, один внутри папки WP-Content, и так далее. Нужный нам сейчас файл index.php в самой верхней папке, содержащей WordPress. (Это где вы разместили WordPress.) Этот файл почти пуст и в нем очень мало кода. Тем не менее, это файл, который загружается всякий раз, когда кто-то посещает блог, и он решает, какие другие файлы, необходимы для отображения сообщений, архивов и домашней страницы блога.

дреамвиевер

2. Нажмите кнопку «Обнаружить». Вы можете увидеть диалоговое окно, а если так, нажмите кнопку “Переключитесь на интерактивный просмотр”.переключ. интерактивный
Вы увидите домашнюю страницу блога.
Поскольку WordPress использует несколько файлов, чтобы создать страницу, возможно, потребуется отредактировать несколько файлов, чтобы изменить одну страницу блога.
3. Нажмите кнопку фильтр в правом углу панели инструментов, затем выберите «Заказной фильтр». В появившемся диалоговом окне введите «style.css;header.php;footer.php;sidebar.php;index.php» (без пробелов) и нажмите кнопку ОК.
фильтр DW

Редактирование HTML в теме WordPress

Чтобы изменить HTML в теме WordPress, необходимо открыть одну из PHP файлов темы. Предположим, что вы хотите удалить гигантское изображение в «шапке» сайта, которое охватывает всю длину страницы.
1. Нажмите кнопку «Разделение» (Split) в панели инструментов, чтобы отобразить дизайн и код.
2. Нажмите кнопку «header.php» в панели инструментов связанных файлов, чтобы отобразить код страницы.
3. Найдите код, который начинается с  «<?php // Compatibility with versions of WordPress prior to 3.4.» (строки 68 и 69). Выделите код с этого момента вплоть до линии 96, которая заканчивается «<?php endif ?>»
HTML DW

4. Нажмите клавишу delete, чтобы удалить этот код. Сохраните файл и нажмите на кнопку «Обновить». Изображения шапки сайта на странице исчезнет.
Теперь Вы удалили изображение по умолчанию, который поставляется с Twenty Ten. Но что, если вы хотите включить свои собственные изображения на странице? К сожалению, вы не можете просто использовать в Dreamweaver команду «Вставить изображение». Вместо этого вы должны использовать немного PHP.
Вот как:
1. Загрузите картинку в папку с изображениями темы. Если вы следуете настройкам из этой серии, вы бы загрузили образ в D: \ WAMP \ WWW \ wordpress\ WP-Content \ Themes \ CreativePro \ images.
2. Добавить тег <img>  в HTML-файл. Например, чтобы добавить изображение, откройте файл header.php и поместите тег <img>  где-то внутри секции <div id=»masthead»>

Давайте предположим, что у вас есть образ с именем logo.png, что составляет 100 пикселей в ширину и 25 пикселей в высоту. Вы можете добавить этот код:
<img src=»<?php bloginfo(‘template_directory’); ?>/images/logo.png» width=»100″ height=»25″>  указывает WordPress правильный URL для папки текущей темы.
Редактирование кода внутри PHP файлов темы может позволить изменить HTML в блоге. Самый простой способ сделать так, чтобы тема выглядела по другому, это изменить правила CSS стилей в файле style.css.

Реальной проблемой для начинающих является выяснение того, какой стиль применяется к конкретным элементам страницы, но, благодаря Dreamweaver CS6 найти стиль совсем несложно.
В Dreamweaver режим «Проверка» позволяет сразу же увидеть стиль CSS, связанный с этим элементом. После этого можно редактировать CSS и обновить внешний вид страницы.

Редактирование CSS в Dreamweaver CS6

В Dreamweaver режим работы «Проверка» можно использовать для редактирования стилей в теме WordPress:
1. В Dreamweaver просмотр страницы index.php в режиме интерактивный просмотр.
2. Нажмите кнопку «Проверка».
3. Наведите курсор мыши на название сайта в верхней части страницы (в моем примере, это называется «Блог») и нажать кнопку. Это выбирает заголовок и подчеркивает «#site-title a» стиля в палитре стилей CSS.
4. Дважды щелкните «#site-title a», чтобы открыть окно правил определения стиля CSS в Dreamweaver. Измените цвет текста с черного на красный, и нажмите кнопку ОК.
site title
Вы только что обновили заголовок страницы. Вы можете вносить любые изменения, которые вы хотели бы, например, использование различных шрифтов, добавление фонового цвета, и так далее.
5. Нажмите кнопку проверка еще раз, чтобы включить его. (Dreamweaver автоматически выходит из этого режима при нажатии на элемент страницы.)

Навигация WordPress сайта в Dreamweaver

До сих пор мы редактировали домашнюю страницу блога. Тем не менее, блог WordPress имеет много различных видов страниц: страницы для одного сообщения в блоге, страницу со списком архива предыдущих постах, и так далее. Если вы хотите изменить стили страницы одной записи блога , вы не сможете просто открыть single.php файл. Поскольку WordPress строит страницы на лету, единственный способ увидеть страницу записей блога, посетить его с главной страницы, нажав ссылку на него.
Вот как это работает:
1. Включите интерактивный просмотр.
2. Удерживайте клавишу Ctrl и нажмите на любые ссылки на странице. Dreamweaver переходит по ссылке и загружает страницу. Если вы хотите иметь возможность нажать любую ссылку, включите «непрерывный переход по ссылкам» на панели инструментов навигации.
непрерывный просмотр DW
3. Следуйте инструкциям в предыдущем разделе этой статьи и используйте режим «Проверка» для проверки CSS любой страницы. Таким образом, вы можете перемещаться по вашему блога WordPress и изменять стили в соответствии с внешним видом.
Как видите, Dreamweaver предоставляет множество полезных инструментов, которые помогут вам легко найти и изменить HTML и CSS на сайте WordPress. Полностью изменился внешний вид темы, но по-прежнему много работы-много CSS для редактирования!

Конечно, эта статья не является полным руководством. Здесь всего лишь маленькая часть того, что и как можно редактировать файлы темы WordPress с Dreamweaver.

Альтернативной программой редактирования php файлов темы сайта WordPress является CodeLobster PHP Edition, о которой Вы можете узнать из статьи Как открыть проект WordPress с CodeLobster PHP Edition.



Вам также может понравиться:


7 комментарий на “Как редактировать файлы WordPress темы с Dreamweaver

  1. Я ж не про описание от производителя спрашиваю. А про то, что можно ли свое собственное уникальное описание, вставлять нескольким товарам на своем сайте? Вот я написал например уникальное описание товара, и вставил его нескольким продуктам. Если у меня одно описание у нескольких товаров будет ,это разрешается, или нельзя?

    • В соответствии с требованиями поисковых систем, не рекомендуется употреблять одинаковые описания на разных страницах.
      Все понимают, когда дело касается интернет-магазинов, многие из продуктов, по существу, то же самое, что означает, что описания продукции могут быть более похожи друг на друга, чем считает это целесообразным Google. По этой причине, если Вы стали владельцем ИМ, должны были понимать, что анализ всех страниц Ваших сайтов и выявления путей снижения избыточности дубликатов описаний имеет решающее значение и Вам придется заниматься этим самостоятельно или нанимать специалистов.
      Пожалуйста, обращайтесь с этим вопросом в соответствующей теме или в форум. Желаю Вам удачи.

  2. Господи, я ни слова не понял, извините. Так можно копировать описание идентичного товара, просто дописывая в названии товара другого производителя, или нельзя?

    • Что тут не понятного? Не копируйте ОПИСАНИЕ ОТ ПРОИЗВОДИТЕЛЯ, потому что данные описания раздаются многим интернет-магазинам. Это приводит к ряду страниц с не уникальным контентом и фильтрам от Google. Это действие может гарантировать, что ваш сайт будет запрещен в поисковых системах. Если никак нельзя без этого поместить эти описания в noindex. Если Вы не знаете что такое noindex, поищите информацию в Интернете. Если не знаете что такое инфографика, погуглите.
      Печально, но факт в том, что оптимизация сайтов электронной коммерции для SEO (Search Engine Optimization) намного сложнее, чем для блогов или просто 5 страниц веб-сайтов компании. Имея много страниц продуктов, возникают многочисленные проблемы, которые делают SEO очень трудным для сайтов ИМ. Желаю Вам удачи.

  3. А не подскажите такой момент? Если на сайте имеются практически одинаковы товары, только производители разные. Можно ли дублировать каждому товару одинаковое описание? Или это плохо для СЕО продвижения?

    • Яндекс давно научился и знает, когда нужно учитывать уникальность контента, а когда нет (имеется в виду ИМ и блог). Но все же уникальность текста, в том числе и описание, очень важная деталь в продвижении товаров и сайта в целом. А также следует избегать повторяющиеся теги title. Учитывайте поисковый спрос и ключевые слова, по которым хотите двигать страницу. Не копируйте описание от производителя, потому что данные описания раздаются многим интернет-магазинам. Можно, как вариант, применить noindex. Или применить инфографику в виде описания.

  4. Как настроить Дримвивер, я его подключил по фтп к удаленному серверу, но визуальный режим не включается. Пишет динамические файлы не найденны. ???? Помогите хоть кто нибудь, в интернете ничего хорошего не нашел, как для себя все пишут, а не для новичков…

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

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

* Copy This Password *

* Type Or Paste Password Here *

десять − семь =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!