Wordpress стили не подключаются в тег head
Я новичок вордпресс, недавно столкнулся с неприятным багом. Мне нужно, что бы показ странички был ограничен до полной загрузки 3 стилей (я пометил их в коде комментами со знаками "!"), иначе перед показом сайта на 100-500 милисекунд выскакивает некрасивая версия сайта без стилей (Показано ниже на скрине). Стандартные хуки наподобие wp_head не работают и все равно подключают стили уже после тега head. Вот мой functions.php
add_action('wp_head', 'chesmo_styles');
add_action('wp_enqueue_scripts', 'chesmo_scripts');
add_action('after_setup_theme', 'chesmo_setup');
add_action('after_setup_theme', 'true_load_theme_textdomain');
add_filter('show_admin_bar', '__return_false');
function chesmo_setup()
{
load_theme_textdomain('chesmo');
add_theme_support('menus');
}
function chesmo_scripts () {
wp_register_script( 'fancybox-js', 'https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js');
wp_enqueue_script( 'custom_jquery', get_stylesheet_directory_uri() . '/js/jquery-2.2.0.min.js');
wp_enqueue_script( 'fancybox-js');
wp_enqueue_script( 'custom_jquery_ui', get_stylesheet_directory_uri() . '/js/jquery-ui.min.js');
wp_enqueue_script( 'aos', get_stylesheet_directory_uri() . '/js/aos.js');
wp_enqueue_script( 'slick_slider', get_stylesheet_directory_uri() . '/js/slick.min.js');
wp_enqueue_script( 'custom_sliders', get_stylesheet_directory_uri() . '/js/sliders.js');
wp_enqueue_script( 'common_js', get_stylesheet_directory_uri() . '/js/common.js');
wp_enqueue_script('newscript', get_template_directory_uri() . '/js/custom_script.js');
wp_enqueue_script('contacts_window', get_template_directory_uri() . '/js/contacts.js');
}
function chesmo_styles() {
wp_register_style('header-css', get_template_directory_uri() . '/css/header.css');
wp_register_style('index-css', get_template_directory_uri() . '/css/index.css');
wp_register_style('bulma-css', get_template_directory_uri() . '/css/bulma.min.css');
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
wp_enqueue_style('header-css');
wp_enqueue_style('bulma-css');
wp_enqueue_style('index-css');
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
wp_enqueue_style('common-css', get_template_directory_uri() . '/css/common.css');
wp_enqueue_style('main-css', get_template_directory_uri() . '/css/style.css');
wp_enqueue_style('animate-css', get_template_directory_uri() . '/css/aos.css');
wp_enqueue_style('slick-css', get_template_directory_uri() . '/css/slick.css');
wp_enqueue_style('footer-css', get_template_directory_uri() . '/css/footer.css' );
wp_enqueue_style('fonts-css', get_template_directory_uri() . '/css/fonts.css' );
wp_enqueue_style( 'fancybox-css', 'https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css' );
if(is_page_template('tpl_promotions.php')){
wp_enqueue_style('non-main-header-css', get_template_directory_uri() . '/css/non-main-header.css' );
wp_enqueue_style('promotions-css', get_template_directory_uri() . '/css/promotions.css' );
}
if(is_page_template('tpl_service.php')){
wp_enqueue_style('service-css', get_template_directory_uri() . '/css/service.css' );
}
if(is_page_template('tpl_all_services.php')){
wp_enqueue_style('non-main-header-css', get_template_directory_uri() . '/css/non-main-header.css' );
}
if(is_page_template('tpl_calculator.php')){
wp_enqueue_style('non-main-header-css', get_template_directory_uri() . '/css/non-main-header.css' );
wp_enqueue_style('calculator-css', get_template_directory_uri() . '/css/calculator.css' );
wp_enqueue_script( 'calculator_js', get_stylesheet_directory_uri() . '/js/calculator.js');
}
if(is_page_template('tpl_contacts.php')){
wp_enqueue_style('non-main-header-css', get_template_directory_uri() . '/css/non-main-header.css' );
wp_enqueue_style('contacts-css', get_template_directory_uri() . '/css/contacts.css' );
}
if(is_page_template('tpl_equipment.php')){
wp_enqueue_style('non-main-header-css', get_template_directory_uri() . '/css/non-main-header.css' );
wp_enqueue_style('equipment-css', get_template_directory_uri() . '/css/equipment.css' );
}
if(is_page_template('tpl_about.php')){
wp_enqueue_style('about-css', get_template_directory_uri() . '/css/about.css' );
}
}
function true_load_theme_textdomain(){
load_theme_textdomain( 'chesmo', get_template_directory() . '/languages' );
}
function chesmo_the_breadcrumb(){
global $post;
if(!is_home()){
if (pll_current_language() == "ru")
echo '<span><a href="'.site_url().'"><span>Главная</span></a></span>';
else if (pll_current_language() == "uk")
echo '<span><a href="'.site_url().'"><span>Головна</span></a></span>';
if(is_single()){ // posts
the_category(', ');
echo " <li> / </li> ";
echo '<li>';
the_title();
echo '</li>';
}
elseif (is_page()) { // pages
if ($post->post_parent ) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_post($parent_id);
$breadcrumbs[] = '<span><a href="' . get_permalink($page->ID) . '"><span>' . get_the_title($page->ID) . '</span></a></span>';
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) echo $crumb;
}
echo '<span>'; echo the_title(); echo '</span>';
}
elseif (is_category()) { // category
global $wp_query;
$obj_cat = $wp_query->get_queried_object();
$current_cat = $obj_cat->term_id;
$current_cat = get_category($current_cat);
$parent_cat = get_category($current_cat->parent);
if ($current_cat->parent != 0)
echo(get_category_parents($parent_cat, TRUE, ' <li> / </li> '));
single_cat_title();
}
elseif (is_search()) { // search pages
echo 'Search results "' . get_search_query() . '"';
}
elseif (is_tag()) { // tags
echo single_tag_title('', false);
}
elseif (is_day()) { // archive (days)
echo '<span><a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a></span>';
echo '<span><a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('F') . '</a></span>';
echo get_the_time('d');
}
elseif (is_month()) { // archive (months)
echo '<span><a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a></span>';
echo get_the_time('F');
}
elseif (is_year()) { // archive (years)
echo get_the_time('Y');
}
elseif (is_author()) { // authors
global $author;
$userdata = get_userdata($author);
echo '<span>Posted ' . $userdata->display_name . '</span>';
} elseif (is_404()) { // if page not found
echo '<span>Error 404</span>';
}
if (get_query_var('paged')) // number of page
echo ' (' . get_query_var('paged').'- page)';
} else { // home
$pageNum=(get_query_var('paged')) ? get_query_var('paged') : 1;
if($pageNum>1)
{
if (pll_current_language() == "ru")
echo '<span><a href="' . site_url() . '"><span>Главная</span></a></span> ' . $pageNum . '- page';
else if (pll_current_language() == "uk")
echo '<span><a href="' . site_url() . '"><span>Головна</span></a></span> ' . $pageNum . '- page';
}
else
{
if (pll_current_language() == "ru")
echo '<span>Главная</span>';
else if (pll_current_language() == "uk")
echo '<span>Головна</span>';
}
}
}
Ответы (1 шт):
Автор решения: KAGG Design
→ Ссылка
TLDR
Используйте правильный хук для постановки стилей в очередь - wp_enqueue_scripts. Обычно функции wp_enqueue_script() и wp_enqueue_style() используют внутри одной функции, в вашем случае - chesmo_scripts().
Объяснение
Надо понимать, что функции wp_enqueue_script() и wp_enqueue_style() не делают ничего, лишь ставят скрипты в очередь (заносят их в массив в ядре). Вывод стилей и скриптов производится на хуке wp_print_scripts, который срабатывает после wp_enqueue_scripts, но ДО wp_head. Поэтому ваши скрипты в хедер уже не попадают, остаются в очереди (массиве) и выводятся ядром уже в футере. Вот почему вы видите некоторое время сайт без нужных вам стилей.