wordpress изменить html css
Так я сегодня задал вопрос и смог получить доступ к wp-admin(СМS). Так я сейчас хочу например изнутри js/css изменить. И слова и изображения а там в CMS нельзя много чего изменить помогите как и откуда это сделать
Отслеживать
задан 18 авг 2017 в 21:57
Sifariw Baku Sifariw Baku
27 7 7 бронзовых знаков
Открываешь страницу в браузере, на которой нужно что-либо изменить — смотришь в консоли какие файлы .css и .js подключаются — ищешь их в проекте, вносишь изменения.
18 авг 2017 в 22:08
а html/изображение? Из FTP захожу 3000+ файлов а то что файлы проекта ссам сайт html/css там хотел изменить html не понятно что все php т.д а из wp-admin не как не изменить
18 авг 2017 в 22:11
Аналогично найти изображение по коду страницы, которая генерируется, и заменить. php -скрипты также могут генерировать код разметки. Проще всего открыть в среде а-ля PHPStorm , там удобней искать нужные файлы и т. д.
18 авг 2017 в 22:13
Так мне не известна программа PHP-storm это для чего? И в среде чего вы сказали(Извините могу надоедать ну вы очень помогаете)
18 авг 2017 в 22:15
PHPStorm — среда для разработки web-проектов в частности.
18 авг 2017 в 22:19
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Изменять, а точнее писать свои css можно через кастомайзер — сайт/wp-admin/customize.php (=внешний вид — настроить) — Дополнительные стили.
Если же есть необходимость править файлы, то нужно использовать механизм дочерних тем. Править оригинальные файл тем, плагинов, а тем более ядра = потерять возможности обновления и риски поломать сайт насовсем.
Отслеживать
ответ дан 19 авг 2017 в 8:13
5,103 2 2 золотых знака 10 10 серебряных знаков 25 25 бронзовых знаков
В кастомайзере не все поменять можно а мне знаете именно что надо есть сайт и есть 3 языка. С языком англ файлы находятся en/themes т.д а версия сайта русского языка и английского очень отличаются(стили) хочу копировать стиль англ на русс и там слово/содержимое изменить
19 авг 2017 в 19:11
Через кастомазер можно поменять любые стили, если знать CSS. Остальной твой набор букв я неосил.
20 авг 2017 в 6:16
Понятно блогадарю
20 авг 2017 в 20:05
В вордпресс есть понятие «темы» (оформление сайта). Все файлы темы находятся в папке /wp-content/themes/название_темы/ . Структура файлов темы может быть почти любая, только обязательно есть несколько файлов:
/wp-content/themes/название_темы/style.css — файл стилей темы (может не использоваться на сайте, но в нем содержатся данные о теме),
/wp-content/themes/название_темы/functions.php — файл с возмозностями темы. Здесь происходит подключение скриптов и стилей на сайт системными функциями WP.
Ну естественно в папке темы должны быть файлы разметки ( index.php минимум)
Как редактировать CSS в WordPress
Для внесения изменений во внешний вид сайтов на WordPress часто приходится редактировать код CSS. В этой статье мы рассмотрим несколько способов изменения CSS кода в темах WordPress.
Редактирование файла style.css вашей темы
Самым распространённым спобом редактирования CSS кода вашего сайта WordPress является его изменение в файле style.css вашей активной темы. Все темы в WordPress находятся в директории wp-content/themes и по названию вашей активной темы, вы сможете легко определить в какой директории она располагается.
Для редактирования файла style.css вашей темы вам необходимо иметь доступ к сайту через FTP, или поддержку изменения файлов темы прямо из панели администрирования WordPress. Если изменение файлов из панели администратора поддерживается вашим хостинг провайдером, вы найдёте эту возможность в разделе Внешний вид → Редактор.
Редактор темы в WordPress
Убедитесь, что в списке справа выбран файл style.css (таблица стилей). Редактировать файлы .php таким образом крайне не рекомендуется, поскольку малейшая ошибка может привести к поломке вашего сайта. Более надёжным методом является редактирование через FTP.
Минусом данного подхода является то, что при обновлении темы все ваши изменения пропадут. Во избежании этого мы рекомендуем воспользоваться дочерней темой, или же сторонним плагином для редактирования CSS кода.
Дочерние темы WordPress
Дочерние темы в WordPress позволяют вносить изменения в другие темы, не меняя при этом исходный код оригинальной темы. Кроме таблицы стилей, дочерние темы могут изменять и другие файлы шаблонов в WordPress, но это выходит за рамки данной статьи.
Для создания новой дочерней темы, дайте ей новую папку в директории wp-content/themes и поместите в неё пустой файл с названием style.css. Путь до вашего файла стилей будет выглядеть следующим образом: wp-content/themes/my-child-theme/style.css , где my-child-theme — название нашей новой дочерней темы.
Откройте файл style.css вашей дочерней темы в вашем любимом текстовом редакторе, и впишите в него следующий код:
/** * Theme Name: My Child Theme * Template: twentytwelve */ @import url(«../twentytwelve/style.css»); body
Директивой Theme Name мы указываем название нашей дочерней темы, а на следующей строке директивой Template указываем на родительскую тему, которую хотим использовать. В нашем случае это тема Twenty Twelve, которая находится в директории twentytwelve .
После заголовка темы, командой @import мы включаем стили темы Twenty Twelve, а всё что следует ниже — наш собственный CSS код. В нашем случае мы изменяем цвет фона на красный.
Сохраните изменения в файл style.css вашей дочерней темы, и загрузите всю директорию my-child-theme на сервер по FTP. Вы увидите, что ваша новая дочерняя тема доступна при выборе тем в разделе Внешний вид → Темы.
Дочерняя тема WordPress
Таким образом, при редактировании файла style.css вашей дочерней темы все изменения будут отображаться на вашем сайте, а при обновлении родительской темы, ваши наработки не пострадают.
Редактирование CSS с помощью плагина
Ещё одним методом редактирования CSS кода в WordPress является использование плагина. Существует немалое количество плагинов, позволяющих изменять таблицу стилей. Мы рекомендуем бесплатный плагин Jetpack, который содержит модуль Custom CSS.
Редактор CSS в Jetpack
Модуль Custom CSS позволяет редактировать стили прямо из панели администрирования WordPress и не требует FTP доступа или особых настроек хостинг площадки. Custom CSS имеет подсветку и проверку синтаксиса, поддерживает ревизии, а так же несколько CSS препроцессоров (LESS и Sass).
Если у вас возникнут вопросы при работе с любым из выше перечисленных методов, оставьте комментарий и мы постараемся вам помочь.
Константин Ковшенин 05.06.2013 05.11.2013
Сооснователь журнала WP Magazine и первой конференции WordCamp в России. Работал в Automattic, WordPress.com, WooCommerce. Принимает активное участие в развитии ядра WordPress. Любимый язык программирования: Python.
Подписаться на рассылку
Подписаться → Подпишитесь на бесплатную рассылку журнала WP Magazine и получайте новости, события, подборки тем и плагинов, уроки, советы и многое другое в мире WordPress!
Читайте также
Топ 20 тем для WordPress за октябрь 2016
Bento – многоцелевая бесплатная тема для WordPress
Лучшие бесплатные темы для WordPress за июнь 2016
Пять новых стартовых тем на основе Underscores
Раз в неделю, только все самое новое про WordPress и никакого спама!
Поиск по сайту
Бесплатная книга
Как защитить свой сайт от хакеров? Читайте в нашей электронной книге.
Вакансии
- WordPress разработчик в компанию Grooni
- Web-разработчик со знанием WordPress в Pravmir.ru
- Ведущий WordPress-программист в компанию UpSolution
- WordPress-ниндзя в команду Pressjitsu
- WordPress разработчик в компанию Automattic
Ищете крутую тему для WordPress? Попробуйте Maker от ThemePatio:
wordpress изменить html css
Так я сегодня задал вопрос и смог получить доступ к wp-admin(СМS). Так я сейчас хочу например изнутри js/css изменить. И слова и изображения а там в CMS нельзя много чего изменить помогите как и откуда это сделать
Отслеживать
задан 18 авг 2017 в 21:57
Sifariw Baku Sifariw Baku
27 7 7 бронзовых знаков
Открываешь страницу в браузере, на которой нужно что-либо изменить — смотришь в консоли какие файлы .css и .js подключаются — ищешь их в проекте, вносишь изменения.
18 авг 2017 в 22:08
а html/изображение? Из FTP захожу 3000+ файлов а то что файлы проекта ссам сайт html/css там хотел изменить html не понятно что все php т.д а из wp-admin не как не изменить
18 авг 2017 в 22:11
Аналогично найти изображение по коду страницы, которая генерируется, и заменить. php -скрипты также могут генерировать код разметки. Проще всего открыть в среде а-ля PHPStorm , там удобней искать нужные файлы и т. д.
18 авг 2017 в 22:13
Так мне не известна программа PHP-storm это для чего? И в среде чего вы сказали(Извините могу надоедать ну вы очень помогаете)
18 авг 2017 в 22:15
PHPStorm — среда для разработки web-проектов в частности.
18 авг 2017 в 22:19
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Изменять, а точнее писать свои css можно через кастомайзер — сайт/wp-admin/customize.php (=внешний вид — настроить) — Дополнительные стили.
Если же есть необходимость править файлы, то нужно использовать механизм дочерних тем. Править оригинальные файл тем, плагинов, а тем более ядра = потерять возможности обновления и риски поломать сайт насовсем.
Отслеживать
ответ дан 19 авг 2017 в 8:13
5,103 2 2 золотых знака 10 10 серебряных знаков 25 25 бронзовых знаков
В кастомайзере не все поменять можно а мне знаете именно что надо есть сайт и есть 3 языка. С языком англ файлы находятся en/themes т.д а версия сайта русского языка и английского очень отличаются(стили) хочу копировать стиль англ на русс и там слово/содержимое изменить
19 авг 2017 в 19:11
Через кастомазер можно поменять любые стили, если знать CSS. Остальной твой набор букв я неосил.
20 авг 2017 в 6:16
Понятно блогадарю
20 авг 2017 в 20:05
В вордпресс есть понятие «темы» (оформление сайта). Все файлы темы находятся в папке /wp-content/themes/название_темы/ . Структура файлов темы может быть почти любая, только обязательно есть несколько файлов:
/wp-content/themes/название_темы/style.css — файл стилей темы (может не использоваться на сайте, но в нем содержатся данные о теме),
/wp-content/themes/название_темы/functions.php — файл с возмозностями темы. Здесь происходит подключение скриптов и стилей на сайт системными функциями WP.
Ну естественно в папке темы должны быть файлы разметки ( index.php минимум)
Add Custom CSS
While most changes can be made with settings in the WordPress editor, you may prefer to use CSS to customize your site if you have experience writing CSS code. This guide will show you how to edit your website with CSS.
This feature is available on sites with our WordPress.com Premium, Business, and Commerce plans. If your site has one of our legacy plans, it is available on the Pro plan.
- About CSS
- Access the CSS Editor via Styles
- Add CSS to Specific Block Types
- CSS Revisions in the Customizer
- Media Width
- Start Fresh
- Preprocessor
- Can I remove the WordPress.com footer credit with CSS?
- Can I remove the black admin bar with CSS?
- Can I use CSS rules like @import and @font-face?
- Can I use web fonts in CSS?
- Can I upload images for use with my CSS?
- Can I edit the CSS stylesheet directly?
- What happens if I cancel my WordPress.com plan?
About CSS
CSS stands for Cascading Style Sheets. It is a markup language that controls the appearance of HTML elements on a web page. WordPress includes a CSS editor to add your own CSS styles to override the default styles of your theme.
There is almost endless potential for what you can do with CSS to modify the design of a website. However, it requires knowledge of how CSS and HTML work (or at least a willingness to learn.) The CSS guide from MDN web docs is a great place to start learning CSS.
If you’re not interested in learning CSS, choose a block theme for your site. These themes provide the most flexible options to customize any aspect of your website’s design without any knowledge of computer code.
There are two methods to access your site’s CSS editor, depending on your theme. Each method is explained below.
Access the CSS Editor via Styles
If your site uses a theme that supports the site editor, you can customize the site with CSS using this method. A quick way to determine if your site uses the site editor is to check under Appearance in your dashboard. If you see Editor here, you can access the CSS editor by following these steps:
- Click the three dots to the right of the “Styles” heading and choose “Additional CSS“:
- Type or paste your CSS into the text box provided.
- Click the “Save” button at the top right of the screen to save the CSS to your site.
You can preview the impact of your CSS changes on any block type by loading the Style Book. Click on the eye icon to open the style book.
Add CSS to Specific Block Types
In Site Editor themes, you can apply CSS code to specific blocks site-wide by following the steps below.
CSS Revisions in the Customizer
The latest 25 versions of your CSS edits are saved and can be accessed by clicking “See full history” at the bottom of the CSS editor. You can restore previous versions of your CSS here.
If the option does not appear, there is no CSS history to restore.
Media Width
The “Media Width” option should be used if you have modified the width of the primary content area using custom CSS. The “Media Width” setting is the default size for full-size images when inserted into your site.
Note that it will not affect the size of some images you added before changing the setting, depending on how they were inserted, and you may have to re-insert some of them after changing the setting.
Start Fresh
By default, the custom CSS you add to the CSS editor will be loaded after the theme’s original CSS, which means that your rules can take precedence and override the theme’s styles.
You can turn the theme’s original CSS off entirely by clicking the “Don’t use the theme’s original CSS” checkbox. This will allow you to use any WordPress.com theme as a blank canvas for designing with CSS. This is an advanced option and should only be used if you want to start over and design the CSS for your theme from scratch.
If you want to build on top of the existing CSS rules—the most common and recommended approach—then you can leave this option disabled.
Preprocessor
WordPress.com has support for CSS preprocessors LESS and Sass (SCSS Syntax). This is an advanced option for users who wish to use CSS extensions like variables and mixins. See the LESS and Sass websites for more information.
Frequently Asked Questions
Can I remove the WordPress.com footer credit with CSS?
All WordPress.com users can choose among several options for the footer credit, from a minimalist WordPress.com logo to text options like “Website Built with WordPress.com”. The footer credit can be hidden on eligible plans.
The footer credit should not be removed with CSS. However, modifying the style of the footer text (i.e., colors and font size) is fine as long as it’s still readable. Using CSS, you can also add content like a copyright notice to the existing footer.
Can I remove the black admin bar with CSS?
All WordPress.com users must maintain the Admin Bar (the dark bar that appears at the top of WordPress.com sites when logged in). If required, customers on plugin-enabled sites can contact support to help remove the Admin Bar.
Can I use CSS rules like @import and @font-face?
Can I use web fonts in CSS?
You can choose your website fonts using the options with your theme. When working with CSS, you are limited to those two web fonts on the front end. However, you can add additional fonts using third-party font plugins.
Can I upload images for use with my CSS?
Yes. You can upload an image to your Media Library and refer to it by its direct URL from within your CSS stylesheet. Here’s an example of how to use a background image in your stylesheet:
div#content < background-image: url('http://example.files.wordpress.com/1999/09/example.jpg'); >Can I edit the CSS stylesheet directly?
We recommend making CSS edits using the CSS editor, as explained in this guide above. When you add CSS using this method, it overrides CSS rules from your theme’s stylesheet. This is a safe method that makes it easier to debug CSS conflicts and restore previous versions of CSS you’ve added.
If you are proficient in editing theme files directly, you can do so via SFTP or by creating a child theme. We recommend testing changes on a staging site before applying them to your live site.
What happens if I cancel my WordPress.com plan?
All upgrades on WordPress.com are renewed yearly. Should you cancel your subscription, your custom CSS will still be saved, but it will no longer be applied to your site for others to see. If you would like them re-applied to your site, you can repurchase your plan, and the styles will be re-applied automatically, provided you haven’t changed themes. If you have changed themes, you will find your past CSS in the CSS revisions.
Was this guide helpful for you?