Сайт на вордпресс как редактировать – Как редактировать шаблон wordpress самому?

wordpress1.ru

Как правильно редактировать WordPress

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

В данной статье я расскажу, как правильно редактировать WordPress-сайты. Что я считаю правильным редактированием? Это когда мы можем изменить размер шрифта wordpress-сайта и сохранить изменения даже после обновления своей любимой темы. Или цвет фона. Или собственный оригинальный логотип. В общем, в этой статье я расскажу, как вносить практически любые изменения в шаблон WordPress’а и не бояться, что после обновления темы (которое, как и обновление самого движка WordPress, необходимо для безопасности) все наши старательные правки исчезнут.

Если редактировать тему WordPress с помощью плагинов

Можно практически до неузнаваемости «отметаморфозить» свой сайт на WordPress’е с помощью плагинов. Сделать это максимально легко. А потом можно не волноваться из-за обновлений темы. Разве что переживать из-за медленной работы перегруженного плагинами сайта. Или из-за того, что разработчики плагина прекратят его поддержку. Или из-за того, что очередной злоумышленник сможет взломать ваш сайт, найдя «дыру» в безопасности одного из плагинов.

«Дыры» бывают и в самом движке WordPress, и в темах, но далеко не так часто, как в плагинах. Особенно, если у вас их с десяток.

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

Как редактировать WordPress-сайт с помощью создания дочерней темы

Раньше я редактировал свой сайт v-zdor.com, просто внося изменения в файлы самой темы. Но дело в том, что на этом сайте тема не обновляется. А вот на hachu-site.ru стоит тема Responsive (которую я, кстати, считаю одной из лучших бесплатных тем WordPress) и разработчики время от времени ее улучшают. Можно, конечно, каждый раз заново копировать изменения в обновленную тему. Но это немного хлопотно (особенно если учесть, что мне еще приходиться вносить изменения в файлы самого движка каждый раз после обновления WordPress).

Недавно я обнаружил, как можно избавиться от лишних хлопот. Можно ОДИН раз создать дочернюю тему и больше не лазить по сто раз в код своей основной, родительской темы.

Сделать дочернюю тему WordPress довольно легко. Для этого нужно:

1. Создать папку в директории, где хранятся темы (wp-content/themes). Как правило, дочернюю тему называют так же, как и родительскую, только добавляют до названия дефис и слово «child». Но делать это необязательно, называйте ее, хоть «Pakasmakabarabaka», работать от этого она не перестанет.
2. Скопировать в созданную папку файл style.css вверху которого должна быть надпись вроде этой.

   /*
Theme Name: Twenty Ten Child
Theme URI: http: //example.com/
Description: Дочерняя тема для темы Twenty Ten
Author: Ваше имя
Author URI: http: //example.com/about/
Template: twentyten
Version: 0.1.0
*/

   Причем обязательные поля здесь только Theme Name: (где должно быть название вашей теперешней действующей темы + слово «Child») и Template: (здесь нужно указать название папки темы, которую вы хотите изменить).

Как выглядит шапка моей родительской темы, на которой в данный момент работает hachu-site.ru

Все! Теперь у вас есть дочерняя тема! В свой новый style.css вы можете полностью скопировать (или импортировать) код со style.css вашей темы и проводить над ним любые эксперименты. Можно также просто взять style.css родительской темы и поменять в нем шапку.

Кроме style.css в папку с дочерней темой можно копировать почти все файлы родительской темы и спокойно их редактировать. Исключением является файл functions.php. В него можно добавлять новые функции, но

Вот список файлов, которые я редактировал для своей дочерней темы.

Хочу отметить, что лучше новичкам ничего не трогать, а ограничиться лишь редактированием style.css. А возможно, для начала лучше обойтись правками селектора body.

Свойства, которые часто редактируют в первую очередь. Background – цвет фона на всем сайте. Color – цвет текста. Font-family – название шрифта. Font-size – размер шрифта.

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

hachu-site.ru

Как безопасно редактировать файлы WordPress сайта

От автора

Статье 4 года, но только недавно она почти потеряла актуальность, когда появилась песочника в Редакторе. Об этом в конце статьи.

Зачем нужно безопасное редактирование

Безопасно редактировать файлы wordpress, нужно, чтобы избежать пропадания сайта и изменение его внешнего вида. Научиться безопасному редактированию  основная задача начинающего пользователя WordPress. Любое ошибочное изменение любого php и css файла, входящего в шаблон сайта, может привести к ошибкам, исправление которых может стать большой проблемой.

Правила как безопасно редактировать файлы wordpress

В административной панели сайта WordPress есть возможность редактирования файлов шаблона сайта. Войдя, в консоли сайта, на страницу Внешний вид →Редактор, вы непосредственно из административной панели можете редактировать основные файлы шаблона WordPress. Но при редактировании шаблона из административной панели сайта, нужно соблюдать несколько мер безопасности, необходимых для аварийного восстановления сайта.

Делайте периодически резервную копию всего сайта

В пути создания сайта и постоянном его редактировании сделайте своим правилом периодически делать резервную копию сайта. Говоря о резервной копии сайта, нужно отметить, что резервная копия сайта состоит из двух частей. Это сам сайт, включая все каталоги и файлы из корневой папки сайта и копия базы данных в формате SQL. Сделать полную резервную копию сайта можно следующими способами:

1. При помощи услуги «Резервное копирование» на своем хостинге;
2. Установив один из плагинов резервного копирования wordpress;
3. Самостоятельно скачать сайт на свой компьютер и сделать экспорт базы данных из панели phpMyAdmin вашего хостинга.

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

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

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

И все- таки, самая надежная копия сайта это копия сделанная самостоятельно. При серьезном  редактировании сайта и при обновлении SEO плагинов и плагинов безопасности, я всегда делаю самостоятельную копию сайта, как будто собираюсь его перенести на другой хостинг. Для меня это самая надежная резервная копия.

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

Делайте копию файла, который редактируйте

Это, пожалуй, самый простой способ безопасного редактирования WordPress. Перед тем как изменить, или дополнить код какого-либо файла WordPress , сделайте его копию, сохраните в простом блокноте windows или в любом текстовом редакторе, к которому вы привыкли (например, Notepad++). В случае ошибок редактирования конкретного файла, восстановите только этот файл из его копии и ошибка должна исправиться.

Важно! Не сохраняйте и не редактируйте файлы WordPress при помощи редакторов Microsoft Word. Это приведет к добавлению ненужных кодов и к фатальным ошибкам на сайте при использовании такой копии файла.

Как восстановить сайт после ошибочного редактирования файла

Если после редактирования файла вы видите, что сайт пропал или весь поменялся, просто войдите в редактор и поменяйте отредактированный файл на его резервную копию.

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

Ну и, конечно же, еще один путь восстановления, это воспользоваться резервной копией сайта на сервере хостинга.

Есть еще один способ безопасного редактирования файлов Wordpres. Он отличается простотой и изяществом. Можно воспользоваться плагином WPide. Плагин потерял актуальность с введением внутреннего инструмента проверки редактирования файлов WordPress.

Плагин безопасного редактировании файлов WPide

• Плагин WPide позволял редактировать любой файл из административной панели сайта без создания резервных копий.
• Плагин сам сохраняет файлы в варианте до редактирования. Если вы неудачно изменили код сайта, то можете открыть плагин WPide и восстановить этот файл из архива плагина.

• Плагин WPide имеет свой редактор файлов. Его внешний вид выгодно отличается от внешнего вида редактора WP.
• Редактор плагина WPide имеет классическую подсветку кода, нумерацию строк и подсветку ошибок синтаксиса, таблицу цветов и массу других полезных функций при редактировании файлов WordPress.

Важно! Всегда можно легко восстановить любой файл в виде, который он имел при установке плагина WPide из архива этого плагина, находящегося по адресу (plugins/WPide/backups/..)

Безопасный редактор WordPrss 4.9.

С не помню какой версии, по-моему с WordPress 4.9., сообщество авторов добавило в функционал системы, так называемую «песочницу» безопасного редактирования файлов. Вкратце, система сама проверят ошибки редактирования и сообщает об ошибках админу. Код с ошибками система не пропускает (не сохраняет).

Удобно, не всегда. Покажу как её отключить. В консоли на вкладке «Ваш профиль», появился чекбокс с отключением подсветки «Отключить подсветку синтаксиса при редактировании кода». Он отключит подсветку и песочницу.

©www.wordpres-abc.ru

Еще статьи

Статьи связанные по теме:

www.wordpress-abc.ru

Редактирование страницы WordPress. Редактирование главной страницы

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

Итак, в первую очередь речь в этой статье пойдет о редактировании главной страницы WordPress. По умолчанию на главную страницу WordPress выводит ваши последние опубликованные статьи в количестве 10 штук.

Однако WordPress имеет несколько настроек, которые позволяют управлять содержимым главной страницы и настраивать ее по своему вкусу. Вы можете, к примеру, изменить количество статей, которые выводятся на одну страницу, и вместо 10 штук показывать большее или меньшее количество. А можете и вовсе не выводить на главной странице последние записи, а вместо этого вывести какую-либо статичную страницу: например страницу приветствия или страницу, которая расскажет о вас и вашем сайте.

Все в руках ваших, как говорится Давайте перейдем от слов к делу и попробуем для начала изменить количество статей на одну страницу. По умолчанию, как я и говорил выше, это десять статей. Идем в меню Настройки — Чтение и находим необходимую настройку. Изменяем количество на необходимое вам, например пусть у меня на одну страницу выводится всего одна статья.

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и научитесь создавать мультиязычные темы с нестандартной структурой страниц

Можем проверить результат в пользовательской части сайта, он должен быть ожидаемым: 1 страница — 1 статья.

Отлично, с этим мы разобрались — все просто. А как быть с тем случаем, когда мы хотим вывести на главной странице какой-то постоянный контент, а сами статьи публиковать на отдельной странице, назовем ее, к примеру, Блог. Здесь также все просто

Для начала нам понадобится создать страницу, на которой будут выводиться записи. Идем в меню Страницы — Добавить новую и создаем ее. Здесь достаточно лишь указать заголовок страницы, в редакторе страниц ничего писать на не нужно — ведь это будет специфическая страница.

После создания новой страницы возвращаемся в меню Настройки — Чтение. Теперь здесь нам интересна самая первая настройка.

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

Итак, статьи мы договорились выводить на страницу Блог, ну а для главной страницы у меня уже создана ранее страница, которую я так и назвал — Главная. Вы можете поступить также или использовать любую другую страницу.

Сохраняем изменения и проверяем результат. Теперь на главной странице WordPress будет выводиться контент назначенной страницы, а статьи будут выведены на страницу Блог. Как видим, все предельно просто и WordPress действительно в этом плане очень гибок. Ну а я на этом с вами прощаюсь. Удачи!

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и научитесь создавать мультиязычные темы с нестандартной структурой страниц

Основы создания тем WordPress

Изучите курс и научитесь создавать мультиязычные темы с нестандартной структурой страниц

webformyself.com

Шаг №8 Редактирование шаблона WordPress(Часть 2)

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

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

Я думаю Вы убедились сколько человек используют такой же шаблон как и у Вас.

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

Поэтому, я думаю, мне не стоит Вас убеждать, немного видоизменить выбранный Вами шаблон wordpress. Как правило это не займет много времени, а результат будет просто колоссальным.

Итак приступим, нам понадобится:

1)Браузер <a href=’http://www.google.ru/chrome’>Google Chrome</a>

2)Редактор Notepad2

Спешу напомнить Вам, что мы тренируемся на шаблоне под названием zeedisplay.

Итак, открываем файл в котором находится описание всех блоков на нашем сайте, этот файл называется
Style.css, который находится в папке с темой.Что бы найти этот файл нам потребуется открыть папку с темой

Открываем данный файл  редактором, который Вы должны были скачать в прошлом уроке.

Перед нами открывается окно с CSS кодом.

Вот как раз этот код мы и будем редактировать.

Допустим, Вы хотите поменять фон сайта,для этого нам нужно в тега

body изменить свойство background на свои значения цвета.

Давайте я поясню более детально.

Было:

Стало:

То есть простой заменой цифр в одной строчке, мы добились изменения фона шаблона WordPress, на всем сайте.

Итак продолжим редактировать шаблон WordPress, и следующим нашим шагом будет изменение рисунка который у нас находится в блоке “custom_header”, для этого в папке с темой находим рисунок под названием default_header.jpg

Нам необходимо знать размер данного рисунка.Все очень просто,нажимаем правой кнопкой мыши по рисунку и выбираем пункт “Свойства”

Далее переходим на вкладку “Подробно”

И тут мы можем увидеть Размер изображения. В данном случае размер у нас равен 900 на 140 пикселей.

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

Допустим, мы нашли подходящее изображение:

”Как его вставить на сайт”-спросите вы.Все очень просто.

Новое изображение нужно переименовать.Смотрим как называется исходное изображение.

И переименовываем точно также новое.

Дело осталось за малым,теперь нам новое изображение необходимо копировать в папку “images” нашей темы, и согласиться с заменой файлов.

Нажимаем Копировать с заменой.

Теперь смотрим на сайт.

Было:

А стало:

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

wpcreate.ru

Какая структура шаблона на WordPress и как ее редактировать

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

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

Если это еще не сделано, тогда читайте предыдущие посты, я там все подробно описывал.

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

Конечно можно, но зачем, когда работать на локальном сервере легче и быстрее.

Структура страницы wordpress шаблона

Для редактирования я решил использовать стандартную тему вордпресс, которая устанавливается автоматически с движком.

Вы, конечно же, можете выбрать любую, в сети куча сайтов, где можно скачать бесплатные шаблоны (пользуйтесь поиском Яндекс или Google).

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

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

Header.php – этот файл ответственный за верхнюю часть страницы блога. В нем находятся логотип и название.

Sidebar.php – данный файл формирует сайдбар. В нашей теме он расположен справа. Здесь располагаются рубрики, свежие записи, архив, метки и другие полезные виджеты.

Footer.php – файл отвечающий за вывод информации в подвале (низу) блога. Как правило, там располагается счетчик количества посещений, автор блога и другие…

Index.php – это один из главных файлов, он выводит информацию на главной странице блога. Не путайте с файлом single.php.

Page.php – данный файл темы выводит информацию статических страниц блога (об авторе, контакты, реклама и другие).

Single.php – самый основной файл wordpress, так как здесь выводится информация всех записей блога.

Archive.php – этот файлик отвечает за вывод архива на блоге, (записей в архиве).

Search.php – файл занимается выводом страниц в поиске блога, (что будет показываться в результатах поиска).

Author.php – данный файл выводит записи определенного автора. Он вам пригодится, если блог ведут несколько человек.

404.php – страница выводится во время ошибки. Если пользователь попадает на несуществующую страницу блога, тогда ему показывается данный файл. Я его немного видоизменил, посмотрите какая страница 404 у меня на блоге, для чего введите любой несуществующий URL адрес в строку браузера.

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

Если вернуться к нашей теме wordpress и посмотреть на нее глазами движка вордпресс, она будет представлять собой примерно такой вид.

Давайте со стандартной темой wordpress сделаем простое редактирование рисунка шапки, изменим положение заголовка, краткого описания и уберем ссылку производителя из футера (подвала) страницы.

 — изменим рисунок шапки темы;
 — изменим местами название и описание блога;
 — убирем ссылку вордпресс в подвале темы;

Меняем шапку блога

Шапка на блоге выводится с помощью картинки path.jpg, которая расположена в папке images редактируемой темы wordpress.

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

c:\hosting\home\localhost\www\my-site.ru\wp-content\themes\twentyten\images\headers\

c:\hosting\home\localhost\www\my-site.ru\wp-content\themes\twentyten\images\headers\

Если вы настраиваете шапку на хостинге, использую ftp-клиент тогда:

http://ваш_сайт/wp-content/themes/twentyten\images\headers\

http://ваш_сайт/wp-content/themes/twentyten\images\headers\

Заходим в папку images темы и находим картинку, которая стоит в шапке блога path.jpg

Открываем ее с помощью программы «Adobe Photoshop». Если хотите редактировать все своими руками, тогда от вас потребуется самые элементарные знания программы.

В «Adobe Photoshop» с данной картинкой можете делать все что угодно вашей фантазии (нарисовать логотип, написать текст, добавить разные эффекты).

Если хотите, можно найти любую другую картинку и в программе подогнать размер под оригинальную. Не забудьте сохранить новое изображение под тем же именем path.jpg.

Редактируем название Title и описание description

Мы видим, что название и описание блога, которое вы пишите в «Параметрах» — «Общие» консоли wordpress, расположены следующим образом.

Заголовок расположен слева, а краткое описание справа.

Для того чтобы их поменять местами или изменить положение на свой вкус, вам потребуется перейти в файл header.php. Заходим в «консоль» >>> «внешний вид» >>> «редактор» и открываем header.php. Находим там следующие строки:

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

Здесь меняем положение значения «left» на «right» и выставляем отступ от правого края «250 px».

Здесь меняем значения «right» на «left».

Перезагружаем страницу и смотрим полученный результат. Как видно заголовок и краткое описание темы поменялись местами.

Убираем ссылку wordpress в подвале блога

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

Для этого переходим в footer.php и находим следующий код:

Удаляем выделенный код и вставляем туда свой текст в виде ссылки или картинку.

Можно посмотреть окончательный результат редактируемой темы wordpress.

На сегодня у меня все. Если у вас есть вопросы по редактированию или изменению темы, вы можете задать их, и я постараюсь ответить.

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

seoslim.ru

Как изменить и настроить тему wordpress ? – ТОП