Same theme in WordPress multisites but with custom css?
How can I apply the same theme on a WordPress multisites but with differents theme options on each site ? For example : site1 —> Theme X with red main color site2 —> Theme X with green main color Regards,
asked Oct 10, 2016 at 17:16
141 2 2 gold badges 4 4 silver badges 14 14 bronze badges
2 Answers 2
Since you need the same theme for both sites, I really advise you to use child themes:
Site 1 - Main theme: - Create /wp-content/themes/site1
- Create /wp-content/themes/site1/style.css:
/* Theme Name: site1 Template: site1 Description: Site1 default theme Version: 1.0 Author: Author URI: */ Then linking the main theme styles and adding your custom class when creating the child theme as following:
Site 2 - Child theme: - Create /wp-content/themes/site1-child
- Now add all the files you need to override in your child theme in /wp-content/themes/site1-child/
- Create /wp-content/themes/site1-child/style.css:
/* Theme Name: site1 child Template: site Description: Site1 child theme Author: Author URI: */
After creating the sites in the network panel (/wp-admin/network/sites.php), go to each site’s dashboard :
- /wp-admin/ for the main site
- /sitename/wp-admin for the second site
Within the theme section, make sure to assign:
- your main site to site1 theme
- your second site to site1-child theme
I hope this helps. Cheers!
answered Oct 11, 2016 at 8:34
Maroun Melhem Maroun Melhem
3,350 1 1 gold badge 20 20 silver badges 22 22 bronze badges
Hello Marounm, Thank you very much. So I have to configure the site 1 in first, and then copy the css options to customize there on the child theme. This process seems to be clear. Than you, I’ll try that 🙂
Oct 12, 2016 at 10:24
Actually the child class is unnecessary, all styles added in the style.css file in your -child theme will only affect site 2 anyway. I updated my answer make sure to follow accordingly. Now regarding what you said, yes you’ll have to configure site1 first as the main website after assigning site1 theme to it, then create site2 and assign site1-child theme accordingly as discussed in my answer also please make sure to accept this question if that fixed your issue 🙂
Oct 13, 2016 at 11:10
You shouldn’t use @import on the css file. It’s better practice creating a functions.php file in your child theme and import the child theme there
Nov 11, 2016 at 2:17
@catmal I’m using import in order to copy the main css file into the child css, I need it to load exactly in this file that’s why I didn’t use the enqueue function in the child theme’s functions.php. Anyway that’s no major issue for the main child theme css, you can always import other css/scripts (related to additional loaded libraries) the proper way by overriding function.php in the child-theme folder and adding your enqueue function to it.
Nov 11, 2016 at 8:51
You achieve the same if you remove import from your child theme css file, create a functions.php and add the code as shown here codex.wordpress.org/Child_Themes
How can I use one stylesheet for multiple sub-sites on my multi-site network?
I have a multi-site WordPress setup. Each sub-site uses it’s own child theme, but there is one stylesheet that has CSS rules that should be used on several of these sub-sites. I do not want to have multiple identical stylesheet files for each sub-site, because when I make changes to it, I would have to make these changes in every instance of the stylesheet, or have to copy-paste it to each sub-site. How can I tell each sub-site to use just one instance of that stylesheet? Perhaps I can create a style.css file for every sub-site, and inside it, write some kind of redirect to the main style.css (one that actually contains the rules)?
asked Apr 30, 2020 at 12:19
Justinas Rubinovas Justinas Rubinovas
111 2 2 bronze badges
3 Answers 3
First off, you’ll obviously need to be using the same parent theme for all sites. You then set up each sub-site with a child-theme for that parent theme.
To use the same stylesheet on multiple sites, add the following code to the functions.php file of each sub-site:
function import_shared_style_sheet() < wp_enqueue_style( 'shared-style-sheet', content_url( '/themes/SOURCE-THEME/style.css') ); >add_action( 'wp_enqueue_scripts', 'import_shared_style_sheet' ); SOURCE-THEME needs to be replaced with the folder name of the theme you are sharing the master styles.css file from.
Keep in mind that the styles.css file of the child-theme of each sub-site will still load. So be sure to remove all css from below the theme data at the top of the file. For example, you should only have something like the following (it will differ, based on whatever child-theme you are using). In this example, the parent theme (for all the sites) is twentytwenty, so the shared styles.css file is in a twentytwenty child theme.
/* Theme Name: Sub-site Theme (child theme) Theme URI: Template: twentytwenty Author: Description: Child theme of Twenty Twenty. Shares style.css of XXX child theme. Version: 1.01 Updated: 2021-02-01 01:14:52 */ Note, that if you end up with some styles you need to apply only to a specific sub-site, you can still add those styles to the styles.css file of that sub-site’s child-theme styles.css file.
Создание модификаторов – дополнительных стилей блоков в темах WordPress
В этом руководстве вы узнаете, что такое стили блоков, когда их использовать и как создавать их с нуля в Gutenberg.
WordPress представил API стилей блоков в версии 5.3 как возможность для авторов тем создавать настройки блоков, которые невозможны с помощью встроенных средств оформления. Однако он часто недоиспользуется в темах. И, когда он используется, результаты иногда лучше заменить вариациями или шаблонами.
Что такое стили блоков?
По сути, стиль блока – это просто класс CSS. Под капотом этот класс может быть присоединен к выводу блока, чтобы изменить его дизайн. Как и любой другой класс, авторы тем могут присоединять к нему любые CSS-свойства и значения, которые они хотят.
Разработчики могут зарегистрировать любое количество стилей для отдельных блоков Gutenberg, и WordPress отобразит их в панели боковой панели блока в редакторе. Пользователи затем могут выбрать свой предпочтительный стиль, такой как дизайн “Закругленный”, показанный на следующем скриншоте:
Встроенный стиль “Закругленный” для блока Изображение.
В целом функция – это просто интерфейс, наложенный на простой класс-основанный селектор.
Когда стоит создавать пользовательский стиль блока
Общее правило большого пальца состоит в том, что стили блоков должны использоваться, когда вы исчерпали другие варианты и нуждаетесь в настройке CSS. Из коробки большинство ядерных блоков поддерживают массив средств дизайна, которые обычно соответствуют существующим CSS-свойствам. Со временем это привело к меньшему количеству сценариев, в которых требуются пользовательские стили блоков.
Если вы хотели бы дать блоку Изображение толстую границу, нет необходимости в пользовательском стиле для этого. WordPress уже имеет встроенные параметры для границ, как показано на следующем скриншоте:
Добавление черной границы к изображению с помощью встроенных средств дизайна.
Авторы тем могут также использовать theme.json для определения значений по умолчанию для каждого из доступных параметров.
Что если вы хотели бы придать “рукописный” вид границе? WordPress не имеет никаких параметров для обработки этого сценария. Это потребовало бы некоторого пользовательского CSS. Это делает его хорошим кандидатом для пользовательского стиля блока.
Блок изображения с рукописной границей.
Это также одна из самых захватывающих вещей в разработке тем. Хотя WordPress сделал большие успехи в создании стандартов, именно в этих стандартах творчество по-прежнему может процветать.
Регистрация пользовательского стиля блока
Для этого учебного пособия вы создадите пользовательский стиль блока, который дает блоку Изображение “рукописную” рамку, как показано на скриншоте в предыдущем разделе. Первый шаг в этом – использование функции PHP [register_block_style()]() .
Приведенный ниже кодовый фрагмент представляет собой быстрый обзор функции и ее параметров:
register_block_style( $block_name, $style_properties );Параметр $block_name должен быть именем типа блока (например, core/image ). Параметр $style_properties – ассоциативный массив аргументов, которые можно передать для настройки стиля:
- name: (обязательный) уникальный идентификатор, который используется для генерации класса CSS (например, is-style- )
- label: (обязательный) интернационализированная, дружественная для пользователя метка для стиля
- inline_style: встроенный CSS, который будет напечатан при использовании стиля
- style_handle: обработка зарегистрированного стилевого листа для подключения стиля
- is_default: следует ли выбрать стиль в качестве значения по умолчанию для блока
Обратите внимание, что style_handle в настоящее время имеет ошибку, при которой он подключает лист стилей только в редакторе, но не на фронтенде. Поэтому его использование не рекомендуется.
Для регистрации пользовательского стиля создайте обратный вызов функции в файле functions.php темы и добавьте его в действие init . Следующий код регистрирует стиль hand-drawn блока:
add_action( 'init', 'themeslug_register_block_styles' ); function themeslug_register_block_styles() < register_block_style( 'core/image', array( 'name' =>'hand-drawn', 'label' => __( 'Hand-Drawn', 'themeslug' ), 'inline_style' => '.wp-block-image.is-style-hand-drawn img < border: 2px solid currentColor; overflow: hidden; box-shadow: 0 4px 10px 0 rgba( 0, 0, 0, 0.3 ); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important; >' ) ); >Темы авторов также могут регистрировать стили блоков через JavaScript. Однако, вероятно, мало или вообще нет сценариев, где это необходимо. Справочная страница руководства редактора блоков описывает, как это сделать. Параметры соответствуют их PHP-аналогам, поэтому техника по существу та же – просто на другом языке.
Загрузка стилей отдельно
Использование параметра inline_style и запись CSS внутри PHP хорошо подходит для одноразовых стилей, но может стать беспорядочным и превратиться в проблему управления в долгосрочной перспективе. Для большинства сценариев вы захотите управлять CSS внутри CSS-файлов и позволить WordPress автоматически встраивать их.
Сначала удалите свойство inline_style из функции, определенной ранее, как показано в следующем:
add_action( 'init', 'themeslug_register_block_styles' ); function themeslug_register_block_styles() < register_block_style( 'core/image', array( 'name' =>'hand-drawn', 'label' => __( 'Hand-Drawn', 'themeslug' ) ) ); >Выше зарегистрирует стиль блока, но теперь у него не будет никакого встроенного CSS.
Теперь вы создадите блок-специфичный лист стилей. WordPress загрузит его содержимое и встроит CSS только при использовании блока. Дополнительные сведения о пер-блоковых листах стилей см. в Использование theme.json и пер-блоковых стилей для более производительных тем.
Для этого упражнения предположим, что у вас пустой assets/blocks/core-image.css , который содержит пользовательский CSS для блока Изображение. Чтобы загрузить его только при использовании блока, добавьте следующий код в файл functions.php :
add_action( 'init', 'themeslug_enqueue_block_styles' ); function themeslug_enqueue_block_styles() < wp_enqueue_block_style( 'core/image', array( 'handle' =>'themeslug-block-image', 'src' => get_theme_file_uri( 'assets/blocks/core-image.css' ), 'path' => get_theme_file_path( 'assets/blocks/core-image.css' ) ) ); >Затем добавьте следующий CSS в файл core-image.css :
.wp-block-image.is-style-hand-drawn img < border: 2px solid currentColor; overflow: hidden; box-shadow: 0 4px 10px 0 rgba( 0, 0, 0, 0.3 ); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important; >Снятие регистрации стилей блоков
В некоторых сценариях вы можете захотеть удалить зарегистрированный стиль блока, например скрывая основные параметры или удаляя что-то зарегистрированное родительской темой или плагином. В большинстве сценариев вы будете использовать функцию [unregister_block_style()]() для этого.
Предположим, вы создаете дочернюю тему для темы, которая зарегистрировала стиль Hand Drawn. Вам нужно знать тип блока ( core/image ) и имя стиля ( hand-drawn ). Следующий PHP-код снимет регистрацию:
add_action( 'init', 'themeslug_unregister_block_styles', 15 ); function themeslug_unregister_block_styles() < unregister_block_style( 'core/image', 'hand-drawn' ); >Существует одно предостережение при снятии регистрации стилей блоков: если стиль был зарегистрирован с помощью JavaScript, он также должен быть снят с помощью JavaScript. Все встроенные стили блоков ядра потребуют этого метода.
Предположим, в файле assets/js/block-editor.js в папке assets/js вашей темы, подключите JavaScript, как показано в следующем фрагменте кода:
add_action( 'enqueue_block_editor_assets', 'themeslug_block_editor_assets' ); function themeslug_block_editor_assets() < wp_enqueue_script( 'themeslug-block-editor', get_theme_file_uri( 'assets/js/block-editor.js' ), array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ) ); >Добавьте следующий код в файл block-editor.js , чтобы снять регистрацию стиля rounded на блоке Image:
wp.domReady( function () < wp.blocks.unregisterBlockStyle( 'core/image', 'rounded' ); >);Несколько стилей на блок
Часто запрашиваемое дополнение к функции стилей блоков – возможность выбирать несколько стилей. В настоящее время это не поддерживается в WordPress. В некоторых сценариях это имеет смысл. Кроме того, под капотом стили блоков представляют собой просто класс CSS, и большинство разработчиков знают, что нет ограничений на классы, которые вы можете добавить к элементу.
Однако на практике множественные стили блоков легко могут конфликтовать друг с другом.
Чаще всего стили блоков, которые можно было бы объединить, являются простыми настройками, которые могут быть лучше отнесены к встроенным средствам дизайна. Блоки WordPress теперь поддерживают широкий спектр функций CSS, подходящих для таких базовых потребностей. И когда эти основы нужно объединять, блок-вариант, возможно, будет лучшим выбором.
Ведутся обсуждения о поддержке нескольких стилей на блок. Возможно, это поддерживается или функция расширяется каким-то образом, чтобы обеспечить большую гибкость в будущем.