Добавление других файлов css в wp_head

Я редактирую стандартную двадцать девятую тему, которая поставляется с последним wordpress.

Мне нужно добавить несколько моих .css файлов в wp_head, но я не уверен, как это сделать. В настоящее время я вызываю свои файлы за пределами wp_head, но это грязно и хотелось бы сделать это правильно.

<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="#" onclick="location.href='http://gmpg.org/xfn/11'; return false;">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo("template_url"); ?>/bootstrap.css" />
<script type="text/javascript"   src="<?php bloginfo("template_url"); ?>/js/bootstrap.min.js"></script>

<?php wp_head(); ?>

Где определяется, что входит в wp_head и как я могу добавить его к нему?

Ответы

Ответ 1

Чтобы добавить свой собственный css в wp_head(), вам нужно использовать коллекцию функций WordPress:

Сначала вы поместите это в свой файл functions.php темы:

add_action('wp_enqueue_scripts', 'your_function_name');

(Здесь используется добавить действие, подключаясь к wp_enqueue_scripts.

Затем вам нужно добавить функцию в файл functions.php, который будет использовать функцию WordPress wp_enqueue_style:

function your_function_name() {
    wp_enqueue_style('my-script-slug',  get_stylesheet_directory_uri() . '/your_style.css');
}

Обратите внимание на использование get_stylesheet_directory_uri() - он получает соответствующий каталог стилей вашей темы.

Это также правильный способ вставить скрипты в свой заголовок. Пример:

function your_function_name() {
    // Enqueue the style
    wp_enqueue_style('my-script-slug',  get_stylesheet_directory_uri() . '/your_style.css');
    // Enqueue the script
    wp_enqueue_script('my-script-slug',  get_stylesheet_directory_uri() . '/your_script.js');
}

Что использует функция WordPress wp_enqueue_script.

Наконец, стоит упомянуть, что изменение темы двадцать тринадцатой (или любой другой основной темы), как правило, не рекомендуется. Рекомендация заключается в создании детской темы (излишней, по моему мнению, но стоит упомянуть).

Ответ 3

@cale_b Мои плагины основаны на библиотеке jQuery, и вызов jQuery из функции wp_head() не был успешным на этом пути

wp_enqueue_script ('jquery', 'get_stylesheet_uri();. 'JS/jquery.min.js');

правильный способ добавления этого в header.php перед всем...

<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>

Очень важно, чтобы вы сначала вызывали jquery перед wp_head(); крючок другого импорта... WordPress поставляется с библиотекой jQuery, потому что он использует его для страниц wp-admin и некоторых других $post и $get запросов на странице... Использование их script намного безопаснее и проще, чем добавить свой собственный файл jquery.min.js в каталог тем...

wp_head(); функция - это лучший способ вызова таблиц стилей, но когда он попадает в библиотеки Javascripts и Javascript, он может оказаться неудачным.

Также обратите внимание, что иногда WordPress не превращает ваш '$' в переменную jQuery, и вы получите ошибки для TypeError, что, конечно, правильно. В этом случае вы должны изменить все "$" на "jQuery", который также является определенной переменной внутри библиотеки jQuery WordPress...

Также обратите внимание, что иногда вам понадобится встроенный javascript и т.д.

<script>
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
</script>

Все эти встроенные скрипты не должны находиться внутри вашего index.php, а не с вашим header.php или footer.php... Вы можете перечислить все их внутри другого вашего inline-scripts.js и вызвать их так, как это происходит они должны были быть перечислены перед следующим образом:

    <script type="text/javascript"  
src="<?php bloginfo("template_url"); ?>/js/your-inline-scripts.js"></script>

или

<script type="text/javascript"
   src="<?php echo get_stylesheet_directory_uri(); ?>/js/yourScript.js"></script>

Я предпочитаю этот второй вариант...

Ответ 4

Таблицы стилей можно загружать практически в любом месте, но установка wordpress по умолчанию использует привязку wp_head() для вывода основной таблицы стилей (style.css);

Например: В Twentyfourteen он загружается по строке 232 функций. php

    // Load our main stylesheet.
    wp_enqueue_style( 'twentyfourteen-style', get_stylesheet_uri(), array( 'genericons' ) );

Одна из причин, почему он предпочитает использовать этот крючок, состоит в том, что если у вас есть два плагина, которые используют одну и ту же таблицу стилей, и оба используют один и тот же дескриптор wp_enqueue_style, тогда WordPress будет добавлять таблицу стилей только один раз, Другая причина заключается в том, что этот дескриптор имеет параметр зависимости, но это другая история...

Ответ 5

Hmm да к выше, но также можно связать свои листы после того, как wp_head вызывается так

<?php wp_head(); ?>
<link href="/wp-content/themes/YourTheme/cssFolder/YourOtherStyleSheet.css">

Это обычно то, что я делаю, как яснее читать.

Кроме того, я бы рекомендовал использовать что-то вроде http://html5blank.com для чистой чистой пустой темы wp вместо того, чтобы пытаться изменить тему по умолчанию (так что ни одна детская тема не совсем другая тема)