Редактирование темы WordPress. Как изменить тему WordPress.
25 Сентябрь 2011 9902 55
Здравствуйте, уважаемые читатели моего блога!
В этом уроке я покажу вам, как можно отредактировать внешний вид темы, исправить некоторые недостатки и убрать ненужные элементы.
О темах и шаблонах можно разговаривать очень долго. Это целое искусство, которым занимаются веб дизайнеры.
Мы же с вами отредактируем лишь основные элементы. При желании можно добиться более индивидуального оформления нашего блога, но сейчас моя основная задача — познакомить вас с основами правки шаблона.
Редактирование темы WordPress
Для оформления своего блога я выбрал тему «mountainlandscape», и на ее основе покажу вам, как можно ее редактировать.
Если вы тоже хотите использовать эту тему, то можете скачать её здесь. Как устанавливать и активировать темы, я показывал в прошлом уроке, можете посмотреть его здесь. И так, давайте посмотрим на нашу тему:
За каждую часть темы отвечают отдельные файлы, которые расположены в папке с темой:
Я приготовил схему, на которой показал, какие файлы отвечают за оформление (расположение, вывод) элементов:
Обращаю ваше внимание, что за вывод контента, в зависимости от темы, могут отвечать несколько файлов. В нашей теме — это index.php, single.php и page.php.
Изучите эту схему, так как в дальнейшем мы неоднократно будем возвращаться к этим файлам.
Давайте посмотрим, что нам нужно здесь редактировать. Я предлагаю внести следующие изменения:
— изменить изображение шапки и подвала;
— переместить меню с названием страниц в левую верхнюю часть шапки;
— изменить надпись «Edit» на надпись «Правка»;
— заменить надписи в подвале на свои.
Изменяем изображения шапки и подвала:
В данной теме шапка – это рисунок формата jpg, вот он:
На этот рисунок наложено еще одно изображение (маска), которое представляет из себя простую заливку, прозрачную посередине (файл mask_head.png). Чтобы ее увидеть, я создал слой черного цвета и на него наложил наше изображение (маску). Сделать это можно в редакторе «Adobe Photoshop».
Здесь же можно расширить прозрачную область (например, вручную при помощи инструмента «ластик») и вставить заголовок блога.
Все эти изображения расположены в папке «images» нашей темы:
| d:\Server\home\localhost\www\Blog\wp-content\themes\mountainlandscape\images\ |
Для того чтобы изменить изображение шапки, открываем его (файл bg.jpeg) при помощи «Adobe Photoshop». Можно использовать и другой редактор, позволяющий работать со слоями. Либо использовать свое изображение, только размер должен быть такой же.
Накладываем на него изображение, которое вы подобрали. Это будет отдельный слой. Затем подгоняем его так, чтобы оно полностью закрыло первый слой (наше первоначальное изображение).
Далее сохраняем полученное изображение в таком же формате и под таким же именем, что и первоначальное (bg.jpeg), в туже папку.
Таким образом, можно заменить все графические элементы (иконки, линии и т.п.) нашей темы.
Если вы еще не научились работать с программой «Adobe Photoshop», то советую вам это сделать. Программа очень полезная. Скачать ее можно бесплатно с сайта rutracker.org.
Перемещаем меню с названием страниц:
За вывод этого меню отвечает файл «header.php». Переходим в административную панель. Пункт «Дизайн», подпункт «Редактор», и в правой части находим и открываем файл «header.php».
Находим в нем следующий код:
Здесь сведения о положении нашего меню в шапке отсутствуют. Зато есть ссылка на стиль «#header ul». То есть положение этого меню прописано в файле «style.css». Открываем его в редакторе:
Находим описание нашего меню «#header ul»:
И изменяем значения «top» (отступ от верней части шапки) и «right» (отступ от правого края) на следующие:
Вместо «right» я указал отступ от левого края («left»). Все, наше меню теперь в левой верхней части шапки:
Изменяем надпись «Edit» на «Правка»:
Открываем в редакторе файл «index.php» и находим следующие коды:
Меняем надпись «Edit» на надпись «Правка». Обратите внимание на то, что при наведении курсора мыши на заголовок заметки нашего поста (на главной странице нашего блога), появляется всплывающее меню с текстом «Permanent Link to Привет мир». Его меняем здесь же, чуть выше. Получится так:
Все, наши надписи изменены.
Заменяем надписи в «подвале»:
За подвал отвечает файл «footer.php», открываем его в редакторе.
Удаляем все ненужные коды. Вместо них можете написать свой текст.
Как вы заметили, текст у меня написан с применением HTML кода (зеленый цвет). Вы можете вручную написать этот код, а можете делать как я (см. видеоурок). Вот так выглядит наша тема после редактирования:
На этом редактирование темы мы закончили. Если у нас обнаружатся еще какие-либо недочеты, мы их исправим в процессе создания нашего блога.
В следующем уроке мы перейдем к установке и настройке плагинов.
Видеоурок по редактированию темы «Wordpress»:
Если Вы хотите создать свой блог, но не знаете как, то рекомендую Вам скачать мой бесплатный видеокурс «Создание блога на WordPress». Подробности в статье «Как создать блог?».
С уважением, Александр Бобрин
Поделись с друзьями:
Обратите внимание:
Похожие статьи
asbseo.ru
Как изменить тему WordPress. Веб-инспектор
Здравствуйте уважаемые начинающие веб-мастера. В этом уроке поработаем над внешним видом нашего сайта.
Как я уже писал раньше, внешний вид сайта создаёт Тема оформления, или шаблон.
И в этом уроке, мы научимся изменять шаблон WordPress, то есть менять цвета, размеры, расположение элементов, картинку в шапке сайта, и вообще всё, что мы видим при заходе на сайт.
Но прежде чем начинать, желательно пройти Основы html и Основы СSS, или хотя бы иметь под рукой справочную литературу иначе, многое о чём я тут расскажу, будет просто не понятно.
Можно конечно воспользоваться моими Шпаргалками, но лучше всё таки подучиться.
Помимо вышеперечисленного Вам необходимо прочитать пост Дочерние темы, и выполнить данные в нём рекомендации. Они очень простые.
Начнём с редактирования стандартной темы «Twenty Ten». Эта тема стоит по умолчанию на сборке WordPress, и именно её можно увидеть сразу после установки движка.
На этом ресурсе, кстати, тоже стоит эта тема, только немного подправленная. Вернее переделанная до основания.
Тем не менее, рекомендации, которые Вы получите в этой статье, применимы для редактирования любой темы оформления WordPress.
Создавать свой web дизайн, мы будем при помощи инструмента Веб-инспектор.
Этот необходимый для разработчика инструмент по умолчанию есть во всех современных браузерах и вызывается клавишей F12.
Так же вызвать его можно, если щелкнуть правой клавишей мыши по странице, и выбрать «Просмотр кода элемента» или «Исследовать элемент»
Дизайн моего сайта уже несколько раз поменялся, и Вы видите давнишний вариант, но сути это не меняет.
Всех возможностей этого инструмента я ещё не знаю (обязательно нужно будет заняться и изучить), но и того что известно хватает для того, чтоб делать с темой всё, что угодно.
Как видите, в большом поле слева находятся строки с html кодом. Каждая стока является html кодом одного из элементов, находящихся в данный момент на странице.
Если навести на неё курсор, то элемент, который ей соответствует на странице, выделится другим цветом, и рядом появится сноска с указанием названия селектора, отвечающего за данный элемент в таблице стилей, и его размер в пикселях.
Если щёлкнуть по этой строке, то она окрасится в синий цвет, как бы зафиксируется, и в поле справа отразятся все свойства и значения заданные, в нашем случае, блоку с меню, в таблице стилей.
Как видим, блок меню в таблице стилей, обозначен селектором #access, и ему заданы следующие значения:
ширина — 940 px
отступ слева — 0 px
Идём ниже
фоновый цвет — жёлтый (изначально был черный)
видимость элемента — видимый
наплывание слева — наверное чтоб не отталкивать заголовок
отступ сверху — 80 px, и размещение по центру
отступ снизу — 30 px
рамка — толщина, сплошная, желтая (изначально чёрная)
Теперь нам известно про этот элемент практически всё, и мы можем, при желании, его подвинуть вниз, или вверх, изменить его цвет, или размер, прижать к любой из четырёх сторон экрана, или скрыть с глаз долой.
Для того, чтоб всё это проделать, нужно пройти в Консоль — Внешний вид — Редактор, и найти там файл style.css
Щёлкаем по нему и, поднявшись по странице чуть выше, видим открывшийся для редактирования файл таблицы стилей. Первым делом копируем весь файл, и сохраняем в каком нибудь редакторе, можно в блокноте.
Вот в этом-то файле нам нужно найти селектор #access. Сначала он появится в разделе » =Structure», но там он находится в группе с другими селекторами, для которых заданны одинаковые свойства и значения.
Не будем пока выводить из этой группы #access, так как ширина, заданная в этой группе, меня, например, устраивала. Опускаемся дальше до раздела «Menu». Вот тут наш блок представлен во всей красе.
Именно здесь можно подвинуть его вверх и вниз, изменив значение в свойстве margin, изменить цвет, а если в свойстве display вместо block поставить none, то сделать невидимым.
Не забываем после каждой манипуляции обновлять файл!
Я специально выбрал для демонстрации блок меню, так как он имеет сложную структуру. Ведь в основном блоке у него находятся ещё блоки ссылок, и текст в этих ссылках, который сам по себе тоже отдельный блок.
Как вы уже заметили, в веб-инспекторе каждая строка начинается с треугольника. Если он направлен вправо, значит в нём скрывается еще несколько строк. Щёлкаем по треугольнику, и нам открывается код элементов, заключённых в блок меню.
В этих элементах, в свою очередь, находятся ещё элементы, и нам надо открыть их все, то есть всё, что находится в блоке меню.
Теперь, перемещая курсор по строчкам в левом поле, в правом поле смотрим, как узнать тот или иной элемент в файле style. css, и прикидываем, какие значения нам хотелось бы изменить.
Затем идём в редактор, находим нужный селектор, и меняем то, что задумали. Покажу что изменил я, чтоб меню приобрело такой вид и функции, как на этом сайте.
Если кому-то захочется вообще убрать это меню со страниц сайта, то для этого нужно пройти Внешний вид > Редактор, и открыть для редактирования файл header.php.
В коде файла находим тег <div role=»navigation»>, и удаляем его, и всё что после него, до первого </div>.
Можно сделать его просто невидимым. Для этого в файле style.css, в селектор #access добавляется свойство display:none.
Теперь посмотрим, как заменить картинку в шапке сайта. Допустим, все предложенные в теме изображения Вас не устроили, и Вы решили установить, что-то совершенно своё. Где взять картинку для шапки, можно посмотреть на странице Как сделать картинку для шапки в Paint, и когда она будет найдена, или сделана, поместить в папку images темы.
Затем идём в файл style.css, и смотрим, что нужно сделать, чтоб не нужная картинка исчезла, а нужная появилась.
Находим раздел «=Header», в котором собрано всё, что связано с шапкой сайта, и находим там селектор изображения. Затем меняем значение display:block на значение display:none, и картинка исчезает с экрана.
Затем поднимаемся до раздела «=Structure», и в селекторе #wrapper, делаем следующую запись. Свойство background: есть по умолчанию, это фон страницы, так что добавляем свойства только для картинки.
В значении свойства background-image, помещаем адрес новой найденной, или сделанной нами картинки, загруженной предварительно в папку images темы оформления.
Если сайт находится на хостинге, то Эта папка находиться в: имя_сайта > public_html > wp-content> > themes > images.
Если сайт ещё на локальном хостинге, то путь к этой папке: Z > home > имя_сайта > www > wp-content> > themes > images.
В первом случае изображение загружается при помощи файлового менеджера, во втором — изображение просто сохраняется в эту папку.
Здесь, после установки, придется подправлять только свойство background-position, чтоб поаккуратнее разместить шапку на странице, а свойство background необходимо на тот случай, если у кого-то из посетителей картинка в шапке не откроется.
В этом случае шапка будет иметь хотя бы фон.
Далее в шапку сайта можно поместить ещё одну картинку, например маленький логотип.
Делается это следующим образом. Заходим Консоль — Записи — Добавить запись, переключаем редактор в режим HTML, и через загрузчик изображений (Добавить медиафайл), загружаем нужную картинку.
В редакторе появляется код этой картинки. Его нужно скопировать, а «Запись» удалить.
Затем заходим в «Внешний вид — редактор», и открываем для редактирования файл header.php, в котором находим строчку <div>
Сразу после этой строки и вставляем скопированный код картинки. В коде есть класс выравнивания, и в зависимости от необходимости aligncenter можно заменить на alignleft, или alignright.
От этого будет зависеть с какого края, или в центре, расположиться изображение.
Если же после сохранения и просмотра, изображение нужно будет ещё немного, куда нибудь подвинуть, то возвращаемся в редактор, и в код картинки, в тег img, вставляем атрибут style со свойством margin:
style=»margin:0 0 0 0;»
Где вместо нулей вставляем необходимые размеры отступов, и таким образом сдвигаем картинку в нужном направлении.
Цвет полей можно изменить спустившись немного вниз, до раздела «=Global Elements», в селекторе тега «body». У меня поля были сделаны из размноженной картинки. Я её в дальнейшем убрал и оставил однотонные, но как это сделать (изображение на полях), можете посмотреть.
Если же менять только цвет, то достаточно изменить значение в свойстве background
Размер, вид, и цвет шрифта сайта меняется здесь
Как добавить оригинальный шрифт на сайт, и где его взять, подробно рассказано в статье Шрифты для сайта
А размер, цвет, внешний вид заголовка, и описания сайта в шапке — здесь. Здесь же можно подправить размещение заголовка и описания, при смене картинки шапки.
На этом пока остановимся. Пробуйте, меняйте, двигайте, набивайте руку. Совсем скоро будем переносить сайт на реальный хостинг. Там конечно тоже будем делать некоторые изменения, вот только делать их нужно более уверенно и быстро, и допускать при этом как можно меньше ошибок.
На этом тема правки шаблона не заканчивается, а только начинается, и в дальнейшем будет рассмотрено ещё множество способов для изменения внешнего вида, и некоторой функциональности сайта.
Перемена
Рецепт для лысых: Намазать голову мёдом, подождать три дня, затем сильно хлопнуть в ладоши — мухи улетят, а лапки останутся.
Как найти элемент в коде < < < В раздел > > > Как создать меню для отдельной рубрики с помощью атрибута «style»
Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster
starper55plys.ru
Как изменить шаблон WordPress. Меняем дизайн темы в CSS
Не секрет что многие чайники начинающие блоггеры после установки шаблона мечтают изменить его внешний вид, но далеко не все знают как это делать.
А кто-то просто боится лезть в эти дебри, поэтому либо оставляют стандартный внешний вид шаблона, либо пользуются платными услугами профессионалов для того чтобы изменить дизайн шаблона WordPress. Но поверьте все не так страшно, как кажется на первый взгляд)
Итак, после того как в прошлом уроке мы разобрались с php- структурой нашего шаблона, пришло время перейти непосредственно к оформлению.
Большинство настроек внешнего вида html страниц хранятся в таблице стилей CSS – файлах, отвечающих за отображение элементов нашей страницы.
Данный урок предполагает наличие базовых знаний о CSS. Если вы хотите изучить что такое таблицы стилей и как с ними работать то милости прошу сюда. Там вы найдете бесплатные уроки по CSS и html, которые познакомят вас с основами.
А теперь давайте посмотрим на практике, что мы можем сделать с нашей темой оформления, благодаря правке CSS правил.
Для примера я выбрал стандартный шаблон Twenty Ten, он должен быть в комплекте с установленным вордпрессом.
Если не хотите тратить время на тренировки, можете сразу начинать со своей темы оформления. Только предупреждаю сразу, что в разных шаблонах могут быть значительные отличия.
Из инструментов нам понадобятся:
- Браузер Mozilla Firefox
- Установить на Мозилу плагин Firebug.
- Для редактирования можно использовать обычный текстовый редактор, но лучше это делать с помощью Notepad++, там есть подсветка кода, и возможность смены кодировки, так что качаем и его.
Как поменять дизайн шаблона WordPress
После того как все скачано и установлено, открываем наш сайт в Мозиле и запускаем плагин firebug нажав на значек жука.
Снизу откроется панель плагина, с которой и будем работать. По умолчанию на вкладках слева мы видим html код нашей страницы, справа CSS стиль выбранного элемента.
Теперь, для того что бы внести изменения в какой-то элемент нашей темы, мы должны узнать где он находится, как называется и какие стили прописаны в нем. В этом нам и поможет фаербаг.
К примеру мы имеем такого вида страницу, и хотим изменить цвет панели навигации.
Это не всегда можно сделать из настроек темы, но зато можно внести изменения вручную в таблицу стилей.
Жмем вот по этому значку курсора нашего плагина, и теперь мы можем выделить любой элемент страницы и получить по нему подробное описание. Так же можем протестировать, как он будет отображаться если мы что-то поменяем в коде.
Теперь перемещая курсор по странице мы видим, что выделенные блоки подсвечиваются рамкой. Кликаем по нашей панели навигации у которой хотим поменять цвет, и во вкладке HTML и Стиль произошли изменения – выделился текущий элемент.
Теперь мы видим, что в коде выбранный нами блок это div с идентификатором “access” В правой части плагина, во вкладке стиль, у нас отображены все свойства для этого идентификатора. Он принадлежит файлу style.css и правило для этого элемента находится на 375й строке данного файла.
За свойства фона у него отвечает строчка background, а конкретно за цвет в сокращенной записи именно этот пункт #000000 Не пугайтесь, это всего лишь шестнадцатеричный код черного цвета 🙂
Кликнув по нему мышью вы сможете отредактировать значение по вашему усмотрению и посмотреть тут же в окне браузера, как изменится элемент страницы. Я например введу #3E6A97 что бы получился грязно-синий цвет этой панельки.
Подбирать цвета и коды под них очень просто с помощью программки ColorMania , там даже есть пипетка, которой можно выбрать любой цвет на вашем экране монитора.
Можете поэкспериментировать с разными значениями и элементами. Не бойтесь — внесенные изменения в окне плагина никак не повлияют на вашу страницу на сервере – они действительны лишь в текущем кэше вашего браузера. При обновлении страницы все настройки сбросятся.
И как нам сделать так, что бы эти изменения сохранить для страницы на сервере, спросите вы?
Очень просто. Заходим через FTP клиент на наш сайт, переходим в папку с нашей темой, в данном случае это папка wp-content/ themes/ twentyten/ и находим там файл style.css.
Это и есть таблица стилей, где хранятся основные настройки внешнего вида нашего шаблона. Открываем ее с помощью Notepad++ ,находим нужную нам 375-ю строчку с правилом для идентификатора access и заменяем черный цвет на нужный нам #3E6A97.
Сохраняем файл(не забываем про кодировку UTF_8 без BOM) заливаем на сервер измененный файл, обновляем страницу браузера и наслаждаемся результатами)
Что можно изменить в шаблоне WordPress?
Да практически все 🙂 Таким образом вы можете менять:
- отображение текста — выделяем фаербагом текст и ищем в стилях его свойства, к примеру font-size: 14px это размер шрифта, color это цвет теста, font-family семейство шрифтов и т.д.
- width и height размеры элементов длина и высота,
- border рамки.
- img картинки и иконки, обычно идут вместе с ссылками
- margin и padding отступы внешние и внутренние
- позиционирование элементов
- background свойства фона
- И многое другое, для любого элемента вашей страницы можно прописать свои стили.
Перечислять можно долго, с помощью CSS стилей вы можете изменить дизайн страницы до неузнаваемости за несколько минут. Полный перечень всех свойств и их описание можно посмотреть тут.
Иногда случается, что стили для отдельных элементов прописываются не в style.css, а в других css-файлах, их название и местоположение вы можете легко увидеть в Firebug и спокойно править эти элементы.
Так же возможно и такое, что для отдельных элементов правила могут прописываться в самом html коде в атрибуте style. В таком случае нужно уже править php файл. Как найти нужный нам php файл мы узнали из предыдущего урока.
Внимание! Прежде чем вносить изменения в вашу тему, настоятельно рекомендую сделать резервные копии всех файлов вашей темы, что бы в случае ошибок вы могли откатить изменения. Ну и конечно же лучше сначала изучить CSS =)
Всего охватить тут конечно же не смог, попытался лишь показать принцип редактирования оформления шаблона, и подсказать инструменты облегчающие эту задачу.
Если вы так и не разобрались в тонкостях верстки вашего шаблона или не хотите тратить свое время на это занятие, то можете обратиться ко мне, за скромное вознаграждение я могу отредактировать ваш шаблон под ваши нужды. Писать на email [email protected]
Для тех кто уже знаком с CSS тема может показаться слишком разжеванной, для новичков же слишком сложной, поэтому если есть какие-то вопросы по вашим шаблонам или что-то непонятно, не стесняйтесь, обращайтесь в комментариях 🙂
Ну а теперь пришло время вплотную заняться плагинами и узнать как происходит их установка.
ruskweb.ru
Как редактировать шаблон на WordPress
На просторах великого Интернета есть множество тем оформления для сайта на WordPress, и большинство из них можно скачать и использовать бесплатно, что и делают многие web-мастера. Из-за этого появляется множество сайтов с одинаковым дизайном.
Иногда это приемлемо, и не влияет на репутацию ресурса, но всё-таки, многие владельцы сайтов хотели бы свой уникальный дизайн.
Из чего состоит тема
Каждая тема оформления сайта на WordPress состоит из множества файлов, среди которых есть файлы с расширением .php. Они отвечают за внешний вид каждой страницы и всех элементов на вашем сайте. Их мы и будем редактировать.
Для того, чтобы изменить файлы .php, входящие в состав темы, существует множество способов. Мы рассмотрим тот, который предоставляет панель администратора, он кажется самым простым и практичным.
Редактирование темы
Не следует пытаться редактировать тему, если вы не разбираетесь в кодах html, так как это может привести к плохим последствиям. Однако, если вы что-то испортите, помните, что вы можете легко восстановить свой сайт из резервной копии или заново установить тему, которую пытались редактировать.
Итак, чтобы отредактировать .php, необходимо пройти в меню «Внешний вид» – «Редактор». Здесь вашему вниманию будет предоставлен редактор html кода в файлах темы.
Сам редактор, кажется не очень удобным, существуют и другие программы просмотра кода. Но мы редактируем тему прямо в панели администратора, поэтому довольствуемся тем, что есть, и на том спасибо WordPress.
C левой стороны мы видим список – это файлы темы, которые можно редактировать. При нажатии на определённую ссылку на файл в окне редактора появится код – содержимое этого файла. Его и редактируем со всем пониманием смысла каждой строки.
Пример редактирования темы
Рассмотрим самый частый пример редактирования темы на Word Press. Это делают почти все, как только устанавливают новую скачанную бесплатно тему – убирают ссылку на сайт, откуда её скачали. Часто авторы темы именно так и делают, указывают просто ссылку на ресурс, и это приемлемо. А иногда бывает, что ссылаются на какой-то иной сайт, который вообще никакого отношения к вашей тематике не имеет. Так что, лучше убрать это.
Чтобы убрать эту ссылку (она обычно располагается внизу), следует редактировать файл footer.php. Здесь вы увидите, где располагается нежелательный текст, и можете его либо убрать, либо заменить на другой.
Затем следует нажать кнопку «Обновить файл». И всё, наслаждайтесь своей темой без не нужных ссылок. Остальные файлы темы редактируются аналогично.
Простое редактирование темы
Есть способ редактировать тему без вторжения в её файлы и код. Для этого нужно пройти в меню «Внешний вид» – «Темы». На выбранной теме будет кнопка «Настроить». Нажав на неё, вы попадёте в весьма простой визуальный редактор. И там вы можете добавлять или убирать виджеты и настраивать другие элементы.
Но, как понятно, в данном способе редактирование очень сильно ограниченно.
Если Вы ещё не проходите у нас обучение, пройдите бесплатный курс.
wpuroki.ru
Как редактировать файлы Вордпресс-темы через хостинг?
Приветствую! Бывает нужно внести правки в код файлов Вордпресс-темы, например, добавить скрипт в хедер (заголовок) или футер (подвал) сайта. Для этого можно открыть нужный файл для редактирования непосредственно из консоли Вордпресс.
Внешний вид – Редактор тем – справа выбираем нужный файл:
кликайте на скриншот для увеличения
Но, не всегда получается сохранить изменения. Например, при попытке добавить в хедер сайта на Вордпресс пиксель от Вконтакте, после сохранения появляется вот такая надпись:
По этому поводу мне несколько раз задавали вопросы – что же делать?
Если вы тоже с таким столкнулись, есть простой альтернативный вариант – внести правки в нужный файл, добавить код пикселя или любой другой скрипт (код) через хостинг.
Рассмотрим 2 варианта, как это сделать
1) Через файловый менеджер на хостинге. Для примера возьмем хостинг Таймвеб.
Зайдем в «Файловый менеджер» – в корневую папку сайта .
Как определить корневую папку? Зайти в раздел «Сайты» и посмотреть, к какой директории привязан домен. Название директории – это и есть название вашей корневой папки.
Заходим в нее в файловом менеджере, внутри заходим в папку с названием public_html. Чтобы зайти в папку, кликаете на нее двойным щелчком мыши.
Внутри, среди прочего, вам нужно найти папку с названием wp-content.
В ней папку с названием themes.
В ней папку с названием вашей Вордпресс-темы.
Это, как матрешка, получается.:)
А внутри, соответственно, файл, который собираетесь редактировать. В случае, с пикселем ВК, Фейсбук и т.п., это будет файл header.php.
На Таймвеб есть возможность редактировать файлы сразу на хостинге. Для этого открываем файл двойным кликом мыши по нему.
Вставляем код в нужное место. Например, код пикселя ставим между тегами <head> </head>.
Нажимаем «Сохранить».
Но, это не всегда срабатывает, может быть так, что не получится сохранить измененный файл. В таком случае, нам нужно скачать этот файл к себе на компьютер и отредактировать его через блокнот Notepad++.
Как скачать?
Выделить мышкой. Нажать по вкладке «Архиватор», в списке выбрать пункт «Запаковать и скачать».
Скачиваем файл header.php в архиве на компьютер, затем перетягиваем файл из архива на рабочий стол и открываем для редактирования в блокноте Notepad++.
Предварительно блокнот нужно скачать и установить – это удобный бесплатный инструмент для работы с кодом.
Точно так же добавляем код в нужное место, сохраняем изменения и закачиваем файл на то же место, вместо текущего header.php. Он просто обновится.
Закачать можно просто перетянув файл с рабочего стола в папку на хостинге. Или через вкладку «Файл» – «Загрузить на сервер».
2) Второй способ попасть к файлам темы через хостинг – использовать ftp-соединение. Например, если на вашем хостинге нет файлового менеджера.
Для ftp-соединения удобно применять программку Filezilla, вы можете бесплатно скачать ее в интернете. Устанавливаете ее и открываете.
Нажимаете вверху «Файл» – «Менеджер сайтов».
Выбираете «Новый сайт» – пишите название.
Далее для входа нам понадобятся ftp-данные, в частности, хост, логин и пароль от хостинга.
Данные для ftp-соединения можно узнать на хостинге. Например, в Таймвеб они отображаются на главной странице аккаунта. Кроме пароля, его вы должны были сразу сохранить себе в надежном месте.
Итак, вводим данные, как на скриншоте, и нажимаем «Соединиться».
Слева в программе отображаются файлы на нашем компьютере. А справа – файлы на хостинге.
Чтобы зайти в корневую папку, кликаем на нее двойным щелчком мыши. А далее по уже знакомому пути – открываем папку public_html – в ней папку wp-content – в ней папку themes – в ней папку с названием вашей темы. Внутри находим файл, который нужно отредактировать.
В Файлзилле нельзя открыть файл для редактирования, только скачать на комп, кликнув по нему правой кнопкой мыши и выбрав «Скачать». Для редактирования на компьютере используем все тот же блокнот Notepad++.
Чтобы загрузить отредактированный файл в папку на хостинге, выбираем его на рабочем столе компьютера слева, нажимаем правой кнопкой мыши и «Закачать на сервер».
К данной статье я подготовила наглядный видеоурок:
Вот и все. Это удобный вариант вносить правки в файлы Вордпресс-темы, когда через консоль не получается сохранить изменения. Или, к примеру, вы что-то сделали не так, когда редактировали файл, и сайт перестал открываться – зайти в консоль вы, соответственно, не можете. Тогда можно зайти через хостинг – вернуть все как было в файле до ваших правок, и сайт снова заработает.
Именно поэтому, прежде чем вносить изменения в код, что-то добавлять или удалять, сохраняйте его исходник в блокноте (очень удобный Notepadd++), чтобы можно было вернуть все как было изначально, если сайт собьется.
Буду рада, если данная информация вам пригодилась!
С уважением, Виктория Карпова
o-zarabotkeonline.ru
Как изменить тему WordPress неподготовленному человеку / Habr
Update:>>> Извините, пришлось добавить после начала дискуссии в комментариях. Не все дочитывают статью до конца, поэтому сразу скажу, что описываемый способ для тех, кто имеет лишь поверхностное, общее представление о том, что такое CSS и HTML. <<<Столкнулся с этим вопросом в первые дни использования WordPress, как движка для моего блога. Все темы, которые мне приглянулись, требовали небольшой добработки, а править стили оформления, когда страница формируется динамически, достаточно неудобно.
Не могу сказать, что являлся в то время знатоком HTML или CSS, потому требовался совершенно не требующий мозгов способ. И он нашелся.
Macromedia Dreamweaver. Я использовал 8 версию. (кстати, подойдет любой WYSIWYG-редактор, который имеет инструментарий для корректировки CSS.
Но, как уже было сказано ранее, содержимое страниц блога генерируется в момент выполнения скриптов, собственно это основная проблема.
Dreamweaver позволяет править и такие странички, если воспользоваться функционалом live data view (кнопка панели инструментов). Но мне такой вариант не понравился, потому я так и не смог победить ошибку, которую выводила программа при попытке изменить какое-нибудь свойство CSS файла.
Потому сделал все проще. Так как мне надо было только откорректировать некоторые параметры CSS, я сохранил страницу блога локально (Файл — Сохранить как-Веб страница только HTML в FireFox). Далее открыл полученный файл.htm в текстовом редакторе и изменил путь файла CSS таким образом:
<link rel="stylesheet" href=http://blog.site.ru/wp-content/themes/
themename/style.css type="text/css" media="screen" />
на
<link rel="stylesheet" href="style.css" type="text/css"
media="screen" />
Следующий шаг — скопировал в папку, в которую сохранил страничку — файл style.css и папку images из каталога темы блога, которую желаю поменять.
Последнее действие — открываем сохраненный файл в Dreamweaver (или в вашем любимом редакторе). И в удобном окне меняем любые свойства CSS-ки.
После того, как все откорректировано, файл стиля сохраняем и копируем в каталог темы блога. Так же в каталог images копируем добавленные или измененные изображения.
Все.
Добавлю, что способ применим, когда требуется изменить расположение, размеры, цвет, какие-то дополнительные характеристики объектов на странице. Можно даже скрыть какие- элементы. Но добавить новые нельзя. Нельзя, потому что в документе разделены структура и стили. Структура отвечает за содержание и наполнение документа, а стили — за расположение, размеры, цвета и прочие детали художественного оформления страницы. Добавление новых элементов потребует изменения структуры документа, а не только стилей оформления, а это уже совсем другая история.
PS Я знаю, что многие редактируют HTML, PHP, CSS и прочие документы в программах типа Notepad. Мне тоже с некоторого момента такой способ ближе. Но выше я описывал, как это сделать проще, как изменить тему под себя совершенно неподготовленному человеку, знающему лишь азы html.
habr.com
Как правильно вносить изменения в темы WordPress?
Здравствуй, дорогой друг!
В этой статье мы поговорим о наболевшем вопросе для многих пользователей WordPress, о том как правильно вносить изменения в темы WordPress чтобы при обновлении не потерять внесённые изменения.
Навигация по статье:
Думаю, что вы уже в курсе что при обновлении любой темы или плагина происходит загрузка новых файлов заменой уж существующих. Поэтому все изменения что вы вносите в файлы темы или плагина пропадают после первого же их обновления.
Конечно же это не очень удобно, но нужно как то выкручиваться.
Способы решения проблемы с обновлением темы WordPress
Вот самые распространённые варианты решения этой проблемы:
- 1.Отказаться от обновления тем и плагинов в которые вносились изменения. Этот вариант – один из самых надёжный, но есть свои риски. Если вы регулярно обновляете WordPress, но не обновляете какие то его плагины или темы, то возможен риск конфликта новой версии движка с плагином, к примеру. С темами такая ситуация случается крайне редко, но бывает всякое.
- 2.Делать себе резервные копии всех файлов, в которые вы вносили изменения и после каждого обновления темы вносить их по новой. Думаю, понятно что это самый неудобный и хлопотный вариант, поэтому на нём мы не будем останавливаться. К тому же структура фалов может меняться.
- 3.Использовать специальные плагины для кастомизации кода, которые сохраняют все внесённые вами изменения не в файлах темы, а в базе данных и при обновлении файлов темы эти фрагменты кода никуда не деваются и по прежнему работают.
Этот способ достаточно удобный, но с его помощью можно править преимущественно файл стилей темы (style.css). И хотя есть плагины, позволяющие по аналогии вносить изменения в php файлы темы, но там как правило всё сводится к тому что вы в этом плагине сохраняете фрагменты кода, а потом вставляете их в нужные файлы шаблона при помощи шорткодов. То есть после обновления темы WordPress всё равно нужно лезть в файлы шаблона и по новой расставлять шорткоды в нужных местах.
- 4.Создание дочерних тем. На мой взгляд, это наиболее правильный способ из вышеперечисленных, хотя и у него есть свои недостатки, о которых мы поговорим в одной из следующих статей.
Внесение изменений в CSS фай темы при помощи встроенного инструмента WordPress
В новых версиях WordPress есть возможность вносить CSS стили в разделе настроек темы, при этом внесённый код сохраняется не в файлах активной темы, а в базе данных и при обновлении темы не затирается.
Для использования этого инструмента переходим в раздел «Внешний вид» — «Настроить» и вбираем пункт «Дополнительные стили».
Здесь мы можем дописывать CSS стили для элементов темы.
Особенности встроенного редактора:
- Просмотр изменений в режиме предпросмотра. После добавления кода результат можно просмотреть в правой части экрана и если он нас устроит, то нажать на кнопку «Опубликовать» на панели инструментов слева.
- Наличие подсветки кода.
- Проверка на ошибки и выдача предупреждений
- Автозаполнение. Это когда вы вводите первые буквы CSS свойства и вам высвечивается список свойств, начинающихся с этих букв, из которого можно выбрать нужное.
Если у вас по каким то причинам не отображается инстркумент «Дополнительые стили» или вы не хотите его использовать, то на помощь придут специальные плагины.
Я отобрала 3 наиболее удобные, на мой взгляд плагина которые помогут вам в решении проблемы с обновлением темы WordPress.
Плагин Simple Custom CSS кастомизации кода
Это один из наиболее популярных плагинов для сохранения изменений в файле стилей темы при обновлении.
Особенности плагина Simple Custom CSS:
- Простота установки и использования
- Наличие своеобразной подсветки кода, подсвечивающей ошибки в названиях и значениях CSS свойств
- Поддержка внесения изменений в режиме предпросмотра
Инструкция по использованию Simple Custom CSS:
- 1.В админ панели сайта заходим в раздел «Плагины» — «Добавить новый» и устанавливаем его, а затем активируем
- 2.Переходим в раздел «Внешний вид» — «Пользовательский CSS» и здесь вставляем нужный CSS код и нажимаем на кнопку «Обновить пользовательский CSS» на панели справа или внизу страницы.
- 3.Так же в этом плагине есть возможность вносить изменение с возможностью предпросмотра. Чтобы ею воспользоваться переходим по ссылке «the Customizer» на странице настроек
Или можно перейти в раздел «Внешний вид» — «Настроить» и откроется то же окно, в котором нас интересует пункт «Simple Custom CSS»
- 4.На панели слева добавляем CSS стили, а в правой части экрана можем видеть как это будет выглядеть на сайте в режиме предпросмотра. Если нас всё устраивает нажимаем на кнопку «Опубликовать» на панели слева.
Плагин WP Add Custom CSS
Особенности плагина WP Add Custom CSS:
- Простота установки
- Наличие подсветки кода и возможность выбирать цветовую схему
- Возможность применять CSS свойства для указанного типа записей
Инструкция по использованию WP Add Custom CSS
- 1.Устанавливаем плагин аналогично предыдущему
- 2.На панели инструментов слева переходим в раздел «Add Custom CSS»
- 3.Вносим нужные CSS свойства в поле CSS rules и сохраняем изменения.
- 4.Для того чтобы использовать подсветку кода ставим галочку возле пункта «Enable» в разделе «Advanced editor» и выбираем тему оформления тёмную (Dark) или светлую (Light), а затем нажимаем кнопку «Save» чтобы изменения применились
После этого в окне редактора появится подсветка кода, с которой гораздо приятнее работать.
- 5.Так же мы можем задать для каких типов записей будут применяться указанные нами CSS свойства
Добавление CSS стилей, JS скриптов и HTML кода при помощи плагина
Для этой цели есть очень интересный плагин Simple Custom CSS and JS.
Особенности плагина Simple Custom CSS and JS:
- Он позволяющий безболезненно добавлять не только CSS стили, но и JS скрипты, а так же HTML код
- Имеет подсветку кода и ошибок
- Внесённый код сохраняется при обновлении темы WordPress
- Позволяет выбирать место подключения стилей и скриптов (header или footer)
- Позволяет добавлять стили, скрипты и код как на внешней части сайта, которую видят посетители (Frontend), так и в административной части сайта
- Все добавленные фрагменты кода сохраняются в отдельном разделе
- Имеет PRO версию с интересными настройками, такими как минификация (сжатие) кода, применения кода только на определённых страницах и сохранение резервных копий добавляемого кода
Инструкция по использованию Simple Custom CSS and JS:
- 1.Устанавливаем и активируем аналогично предыдущим плагинам
- 2.Переходим в раздел «Custom CSS & JS» в боковом меню WordPress
- 3.Выбираем один из разделов «Add Custom CSS», «Add Custom JS», «Add Custom HTML», в зависимости от того какой код вы хотите добавить.
- 4.Задаём название для фрагмента кода, чтобы в дальнейшем не путаться, добавляем нужный код и нажимаем на кнопку «Опубликовать» на панели справа.
Комментарии, которые изначально присутствуют в поле для ввода кода можно удалить.
- 5.Так же мы можем задать ряд настроек на панели справа.
- Linking type – позволяет выбрать как будет подключаться наш код в шаблон страницы
- External File – как отдельный файл
- Internal – в виде встроенного кода
- Where on page – здесь можно выбрать в какой части шаблона будет выводится код (Header или Footer)
- Where in site – позволяет применять указанный код на внешней части сайта (In Frontend), в админке (In Admin) и на странице авторизации (On Login Page)
Все вышеперечисленные способы позволят вам добавлять свои CSS свойства и даже JS код, которые будут сохраняться после обновления темы WordPress.
Но что делать если нам нужно не просто добавить какой-то фрагмент кода, а существенно изменить один из файлов шаблона, например, поменять блоки местами или добавить свои блоки или доработать функционал темы?
Если для нас важно сохранить возможность обновления темы, но при этом чтобы внесённые нами изменения в файлах не затирались, то здесь нам не обойтись без создания дочерних тем.
Для тех кто не хочет заморачиваться с копированием файлов и изменением кода есть специальный плагин, существенно облегчающий процесс создания дочерней темы. Более подробно о нём я расскажу в одной из следующих статей.
На этом у меня всё! Если данная статья была для вас интересна – оставляйте свои комментарии! Так вы даёте мне понять что подобные статьи вам интересны и есть смысл писать по этой теме.
Успехов вам и до скорых встреч!
С уважением Юлия Гусарь
impuls-web.ru