#php #css #wordpress #plugins #enqueue
#php #css #wordpress #Плагины #очередь
Вопрос:
Я пишу пользовательский плагин WordPress, я использую тему OceanWP с Elementor и пытаюсь поставить в очередь / зарегистрировать стили / скрипты Bootstrap 4.5, а также свои собственные пользовательские стили / скрипты.
Однако стили OceanWP по-прежнему имеют приоритет, поскольку используются вместо моих стилей / скриптов.
В настоящее время я пытаюсь переопределить ресурсы темы, повысив приоритет в add_action, но мне не повезло.
Я пытаюсь отобразить пользовательскую форму, состоящую из нескольких частей, и отобразить ее на странице, используя короткий код.
public function __construct()
{
//set dirpath
$this->_dirpath = dirname(__FILE__);
add_action('wp_enqueue_scripts', array($this, 'cmmc_styles'), 9999);
add_action('wp_footer', array($this, 'cmmc_scripts'));
add_shortcode("sme-cmmc-form", array($this, "displayCmmcForm"));
}
public function cmmc_scripts()
{
///wp_enqueue_style('bootstrap_css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css', false, NULL, 'all');
wp_enqueue_script('popper_js', 'https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js', array('jquery'), NULL, true);
wp_enqueue_script('bootstrap_js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js', array('jquery'), NULL, true);
wp_enqueue_script('cmmc_js', plugin_dir_url( __FILE__ ) . 'assets/js/app.js', array('jquery'), '1.0' );
//wp_enqueue_style('custom_styles', plugins_url('/assets/css/styles.css', __FILE__));
}
public function cmmc_styles() {
wp_register_style('bootstrap_css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css', false, NULL, 'all' );
wp_enqueue_style('bootstrap_css');
wp_enqueue_style('custom_styles', plugins_url('/assets/css/styles.css', __FILE__));
}
Может кто-нибудь, пожалуйста, сказать мне, как я мог бы переопределить стили тем, даже если это только для этого плагина, или временно удалить стили из очереди для этой отдельной страницы?
РЕДАКТИРОВАТЬ: для добавления в поставленные в очередь стили и скрипты из темы
add_action( 'wp_enqueue_scripts', array( 'OCEANWP_Theme_Class', 'theme_css' ) );
// Load his file in last.
add_action( 'wp_enqueue_scripts', array( 'OCEANWP_Theme_Class', 'custom_style_css' ), 9999 );
// Remove Customizer CSS script from Front-end.
add_action( 'init', array( 'OCEANWP_Theme_Class', 'remove_customizer_custom_css' ) );
// Load theme js.
add_action( 'wp_enqueue_scripts', array( 'OCEANWP_Theme_Class', 'theme_js' ) );
/**
* Load front-end scripts
*
* @since 1.0.0
*/
public static function theme_css() {
// Define dir.
$dir = OCEANWP_CSS_DIR_URI;
$theme_version = OCEANWP_THEME_VERSION;
// Remove font awesome style from plugins.
wp_deregister_style( 'font-awesome' );
wp_deregister_style( 'fontawesome' );
// Load font awesome style.
wp_enqueue_style( 'font-awesome', OCEANWP_THEME_URI . '/assets/fonts/fontawesome/css/all.min.css', false, '5.11.2' );
// Register simple line icons style.
wp_enqueue_style( 'simple-line-icons', $dir . 'third/simple-line-icons.min.css', false, '2.4.0' );
// Register the lightbox style.
wp_enqueue_style( 'magnific-popup', $dir . 'third/magnific-popup.min.css', false, '1.0.0' );
// Register the slick style.
wp_enqueue_style( 'slick', $dir . 'third/slick.min.css', false, '1.6.0' );
// Main Style.css File.
wp_enqueue_style( 'oceanwp-style', $dir . 'style.min.css', false, $theme_version );
// Register hamburgers buttons to easily use them.
wp_register_style( 'oceanwp-hamburgers', $dir . 'third/hamburgers/hamburgers.min.css', false, $theme_version );
// Register hamburgers buttons styles.
$hamburgers = oceanwp_hamburgers_styles();
foreach ( $hamburgers as $class => $name ) {
wp_register_style( 'oceanwp-' . $class . '', $dir . 'third/hamburgers/types/' . $class . '.css', false, $theme_version );
}
// Get mobile menu icon style.
$mobileMenu = get_theme_mod( 'ocean_mobile_menu_open_hamburger', 'default' );
// Enqueue mobile menu icon style.
if ( ! empty( $mobileMenu ) amp;amp; 'default' !== $mobileMenu ) {
wp_enqueue_style( 'oceanwp-hamburgers' );
wp_enqueue_style( 'oceanwp-' . $mobileMenu . '' );
}
// If Vertical header style.
if ( 'vertical' === oceanwp_header_style() ) {
wp_enqueue_style( 'oceanwp-hamburgers' );
wp_enqueue_style( 'oceanwp-spin' );
}
}
/**
* Returns all js needed for the front-end
*
* @since 1.0.0
*/
public static function theme_js() {
// Get js directory uri.
$dir = OCEANWP_JS_DIR_URI;
// Get current theme version.
$theme_version = OCEANWP_THEME_VERSION;
// Get localized array.
$localize_array = self::localize_array();
// Comment reply.
if ( is_singular() amp;amp; comments_open() amp;amp; get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
// Add images loaded.
wp_enqueue_script( 'imagesloaded' );
// Register nicescroll script to use it in some extensions.
wp_register_script( 'nicescroll', $dir . 'third/nicescroll.min.js', array( 'jquery' ), $theme_version, true );
// Enqueue nicescroll script if vertical header style.
if ( 'vertical' === oceanwp_header_style() ) {
wp_enqueue_script( 'nicescroll' );
}
// Register Infinite Scroll script.
wp_register_script( 'infinitescroll', $dir . 'third/infinitescroll.min.js', array( 'jquery' ), $theme_version, true );
// WooCommerce scripts.
if ( OCEANWP_WOOCOMMERCE_ACTIVE
amp;amp; 'yes' !== get_theme_mod( 'ocean_woo_remove_custom_features', 'no' ) ) {
wp_enqueue_script( 'oceanwp-woocommerce', $dir . 'third/woo/woo-scripts.min.js', array( 'jquery' ), $theme_version, true );
}
// Load the lightbox scripts.
wp_enqueue_script( 'magnific-popup', $dir . 'third/magnific-popup.min.js', array( 'jquery' ), $theme_version, true );
wp_enqueue_script( 'oceanwp-lightbox', $dir . 'third/lightbox.min.js', array( 'jquery' ), $theme_version, true );
// Load minified js.
wp_enqueue_script( 'oceanwp-main', $dir . 'main.min.js', array( 'jquery' ), $theme_version, true );
// Localize array.
wp_localize_script( 'oceanwp-main', 'oceanwpLocalize', $localize_array );
}
Комментарии:
1. Нам также нужно посмотреть код постановки в очередь для стилей, которые вы пытаетесь переопределить, пожалуйста.
2. @FluffyKitten добавил их в
Ответ №1:
Трудно сказать, как удалить скрипты из очереди, не взглянув на исходный код темы. В любом случае, обычно вам просто нужно подождать, пока тема выполнит свою работу, подключиться к wp, и они удалят стили, ищущие их названия дескрипторов. Что-то вроде этого:
add_action('after_setup_theme','alter_styles');
function alter_styles(){
wp_dequeue_style();
wp_dequeue_script();
}
Вместо этого, говоря о вашем коде, первый вопрос: вы уверены, что загружаете этот код в нужное время в нужном месте или он вообще выполняется?
Вы можете сделать что-то вроде:
add_action('template_redirect','my_template_redirect');
function my_template_redirect(){
if (is_page('your_page')){
// Load class / do stuff with scripts/styles
}
}
для уверенности и выполнения кода только для этой конкретной страницы
Комментарии:
1. Вы имеете в виду ошибки в коде или вам не удалось достичь ожидаемых результатов? Вы даже можете попробовать использовать enqueue, передав параметры зависимости, но вам всегда нужно знать имя дескриптора родительской темы
2. Нет, ни один из них не сработал для меня в том смысле, что они не достигли желаемых результатов
3. Если это всего лишь вопрос нескольких правил, просто замените их более конкретным правилом CSS (скопируйте родительскую тему и добавьте один уровень специфичности CSS). Если это не сработает, попробуйте использовать параметр зависимостей enqueue_styles и использовать имя дескриптора, полученное из родительской функции theme_css. Это способы достичь того, что вы ищете. Остальное касается порядка выполнения кода WordPress или правильного выполнения чего-либо. Без просмотра всего этого довольно сложно, но я думаю, мы дали вам ответы
Ответ №2:
Если вы используете те же имена классов css, в вашем файле css просто добавьте !важно перед точкой с запятой к атрибутам, которые вы хотите принудительно использовать.
Комментарии:
1. Они используют селекторы типов ввода, чтобы таким образом напрямую настраивать таргетинг на элементы. Не уверен, как это преодолеть.
Ответ №3:
Существует несколько способов заставить ваши таблицы стилей загружаться после загрузки других таблиц стилей. Вы уже испробовали несколько способов, но родительская тема имеет очень высокий приоритет 9999 , поэтому вам нужно использовать еще более высокий, иначе это не сработает.
1. Приоритет
Вы используете приоритет 9999 в своем add_action , но если вы посмотрите на родительскую тему, она использует:
add_action( 'wp_enqueue_scripts', array( 'OCEANWP_Theme_Class', 'custom_style_css' ), 9999 );
Приоритет для вашего кода на самом деле не выше, чем у родительской темы, поэтому вам нужно снова подняться выше, например
add_action('wp_enqueue_scripts', array($this, 'cmmc_styles'), 10000);
2. Удаление из очереди (Обратите внимание, вам нужно сопоставить значения, использованные при постановке в очередь)
Вы сказали, что удаление из очереди у вас не работает, но обратите внимание, что при удалении из очереди стиля приоритет определяется при его запуске — точно так же, как при постановке в очередь, — поэтому вам нужно использовать более высокий приоритет, чем тот, который использовался при постановке в очередь. Он также должен использовать тот же хук (или более поздний).
Как мы видели выше, вам нужно сделать это с приоритетом выше, чем 9999 с которым они были поставлены в очередь, например
function dequeue_oceanwp_styles() {
wp_dequeue_style('oceanwp-style');
wp_deregister_style('oceanwp-style');
}
/* Now call this function with a higher priority than 9999 */
add_action( 'wp_enqueue_scripts', 'dequeue_oceanwp_styles', 10000);
3. Зависимости
Если это не сработает, вы можете настроить зависимости между стилями, чтобы принудительно изменить порядок.
При использовании wp_register_style или wp_enqueue_style вы можете указать зависимости для таблицы стилей, которую вы регистрируете / ставите в очередь, то есть для других таблиц стилей, необходимых вашей таблице стилей. Это означает, что регистрируемая вами таблица стилей не будет загружена до тех пор, пока после тех, от которых она зависит.
Для этого вы передаете массив дескрипторов для таблиц стилей, которые должны быть загружены первыми, например
// create an array with the handles of the stylesheets you want to load before yours
$dependencies = array('oceanwp-style', 'oceanwp-hamburgers', /* etc. */ );
/* Noew pass this in as the dependencies for your stylesheets */
wp_register_style('bootstrap_css',
'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css',
$dependencies, /* array of dependencies */
NULL, 'all' );
wp_enqueue_style('bootstrap_css');
/* Add bootstrap to the dependencies, if your custom_styles needs it */
$dependencies[] = 'bootstrap_css';
wp_enqueue_style('custom_styles',
plugins_url('/assets/css/styles.css', __FILE__),
$dependencies, /* array of dependencies */
);