web-dev-qa-db-ja.com

このWordPressテーマにCSSスタイルを追加できないのはなぜですか？

私はこのチュートリアルで示すように私が開発しているWordPressテーマにCSSスタイルを追加しようとしています： http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and -styles-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 fileに次のコードを書きました。

<?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 はロードされていません。どうして？何が足りないの？

特に、前のチュートリアルで理解できないことは、header.phpファイルでは決して呼び出されないため、 wpb_adding_styles（） がどのように呼び出されたかということです。

誰かが私を助けることができる？

TNX

アンドレア

theme-developmentthemescsswp-enqueue-scriptwp-enqueue-style
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はいくつかのパラメータを取ります。上記の例で私は使っています：

  • 一意のID（ハンドル） - 依存関係に使用できます
  • スタイル自体へのパス - これは明白なはずです
  • 依存関係のarray()（この場合は空） - たとえば、2つのスタイルをエンキューした場合、2番目のスタイルに設定できます。array('main-css')とWPは、main-cssスタイルのIDのスタイルがロードされるまで待機します。ロードする前に.
  • バージョン - 今、これはあなたが望むものなら何でもすることができます。たとえば、テーマを更新したときやクライアントに問題があるときには、これを常に設定して、コードを見るだけでバージョンをすばやく判断できます。もう1つ良いことは、より高い（またはより低い）バージョン番号でファイルを更新すると、スタイルがキャッシュから取得されるのではなく実際に読み込まれるようになることです。
  • 最後のものは、このスタイルシートが定義されているメディアです。

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');

グーグルフォントなどの他の要素についても同じことが言えます。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ファイルにある場合は、カスタムCSSファイルのパスを参照するときにget_template_directory_uri()を使用します。

コードは非常に近いですが、次のように修正する必要があります。

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