it-swarm.com.ru

Добавление других 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="http://gmpg.org/xfn/11">
<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 и как мне добавить свой собственный?

24
probablybest

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

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

add_action('wp_enqueue_scripts', 'your_function_name');

(Используется действие add action hook, подключаемое к wp_enqueue_scripts action.)

Затем вам нужно добавить функцию в ваш файл 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 .

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

40
cale_b

используйте wp_enqueue_style для таблиц стилей и wp_enqueue_scripts для javascript

http://codex.wordpress.org/Function_Reference/wp_enqueue_style

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

1
Tom

@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 на странице ... Использование их скриптов намного безопаснее и проще Затем добавьте свой собственный файл jquery.min.js в каталог тем ...

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

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

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

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

Все эти встроенные скрипты не должны быть ни внутри вашего index.php, ни в header.php, ни в footer.php ... Вы можете перечислить их все в другом your-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>

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

1
The Bumpaster

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

Например: в Twentyfourteen он загружается в строке 232 functions.php

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

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

0
maioman