it-swarm.xyz

Почему я не могу добавить стиль CSS в эту тему WordPress?

Я пытаюсь добавить стиль CSS в тему WordPress, которую я разрабатываю, как показано в этом руководстве: http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and -style-in-wordpress/ но, кажется, не работают, и я не могу понять, почему.

Так что это head.php файл моей личной темы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<!--
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
-->
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<!-- <?php bloginfo('stylesheet_directory'); ?>/ -->
<script language="javascript" type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js.js"></script>
<!--
<script language="javascript" type="text/javascript">    
    if(f)
    {
        write_css('<?php bloginfo('stylesheet_directory'); ?>');
    }
</script>
-->

<?php wp_head(); ?>
</head>
<body>
<center>
<div id="page">
<div id="header">

<h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
<hr />

И в мой файл functions.php я поместил следующий код:

<?php
function wpb_adding_styles() {
    wp_register_script('my_stylesheet', plugins_url('style.css', __FILE__));
    wp_enqueue_script('my_stylesheet');
}

add_action('wp_enqueue_scripts', 'wpb_adding_styles');
?>

Но файл style.css не загружается. Зачем? Что мне не хватает?

В частности, в предыдущем уроке я не могу понять, как и как вызывается wpb_adding_styles () , потому что в файле header.php он никогда не вызывается.

Кто-то может мне помочь?

Tnx

Andrea

5
AndreaNobili

Вы используете plugins_url - поэтому указываете на совершенно другой каталог, чем ваша текущая тема. Если вы просто пытаетесь установить стиль темы, сделайте это так:

function load_theme_styles() { 
    wp_enqueue_style('main-css', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'load_theme_styles');

wp_enqueue_style принимает некоторые параметры. В приведенном выше примере я использую:

  • Уникальный идентификатор (дескриптор) - я могу использовать его для зависимостей
  • Путь к самому стилю - это должно быть очевидно
  • array() зависимостей (в данном случае пустых) - например, если бы у нас было два поставленных в очередь стиля, мы могли бы установить во втором array('main-css'), а WP затем WAITED до стиля с идентификатором стиля main-css загружается перед загрузкой.
  • Версия - теперь это может быть что угодно. Я всегда устанавливаю это как, например, когда я обновляю темы, и у клиента есть проблемы, я могу быстро определить версию, просто взглянув на код. Еще одна полезная вещь - это то, что обновление файлов с более высоким (или более низким) номером версии будет гарантировать, что стили действительно загружаются, а не извлекаются из кэша.
  • Последний - это просто носитель, для которого была определена эта таблица стилей.

PS. Нет необходимости регистрировать это сначала. Это так же безопасно, как зарегистрироваться и затем вызвать его через очередь. Если вы хотите зарегистрировать свои сценарии, но не загружаете их напрямую на своих страницах, вы можете зарегистрировать файлы один раз, а затем загрузить их, когда они вам понадобятся, просто вызвав wp_enqueue_script( $handle ) (просто передайте дескриптор $, а остальное будет взято из wp_register_script()). Так что, если вы хотите просто загрузить его (что составляет 99% раз), вы можете просто опустить его.

Ссылка:

Что касается вашего файла header.php, эта часть:

<script language="javascript" type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js.js"></script>
<!--
<script language="javascript" type="text/javascript">    
    if(f)
    {
        write_css('<?php bloginfo('stylesheet_directory'); ?>');
    }
</script>
-->

должны быть удалены, и любой скрипт должен быть добавлен в WP точно так же, как вы добавляете стили. Например:

function load_Java_scripts() {
    wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'load_Java_scripts');

То же самое относится и к другим элементам, таким как, например, шрифты Google и т.д. Используйте wp_enqueue_scripts, чтобы добавить их:

function load_google_fonts() {
    $protocol = is_ssl() ? 'https' : 'http';
    wp_enqueue_style( 'theme-default-fonts', "$protocol://fonts.googleapis.com/css?family=ADD_YOUR_DESIRED_FONT_FAMILIES_HERE' rel='stylesheet' type='text/css" );}
add_action( 'wp_enqueue_scripts', 'load_google_fonts' );

Где у меня есть ADD_YOUR_DESIRED_FONT_FAMILIES_HERE, вы должны добавить семейства шрифтов из шрифта Google. Если вы хотите несколько, просто разделите их с помощью |. Например, если я хочу шрифт Roboto и шрифт PT Serif, я написал бы это следующим образом Roboto:400,700,300|PT+Serif:400,700,400italic

5
Borek
  1. При регистрации и постановке в очередь CSS-файлов вам необходимо использовать wp_register_style() и wp_enqueue_style().

  2. Если этот код находится в файле functions.php вашей темы, вы хотите использовать get_template_directory_uri() при обращении к пути ваших пользовательских файлов CSS.

Ваш код очень близок, но должен быть исправлен следующим образом:

function wpb_adding_styles() {
        wp_register_style('my_stylesheet', get_template_directory_uri() . '/style.css');
        wp_enqueue_style('my_stylesheet');
}

add_action('wp_enqueue_scripts', 'wpb_adding_styles');
2
Rachel Baker