WordPress スタイルシートファイルの指定

  Code Tips minimum Theme

<html> タグの <head> の中のスタイルシートファイルの指定をテンプレートタグを使用して出力してみます。

<head> タグの中に下記を出力するようにします。

<link rel='stylesheet' id='style-css' href='http://localhost/{wordpressのディレクトリ}/wp-content/themes/ctips/style.css' type='text/css' media='all' />

 

style.css にテスト用のスタイルを記述

スタイルシートが適用されたかわかりやすいように【style.css】にスタイルを書いておきます。

body {
  background-color: #f0f0f0;
}

 

wp_head() の設置

'wp_head' アクションをスタートさせる。テーマテンプレートファイル内の </head> タグ直前で使う(例: header.php や index.php の中)。

WordPress Codex : 関数リファレンス/wp head

wp_head()

 

パラメータ

この関数は変数を受け付けません。

 

wp_head()</head> の直前に設置します。

【index.php】

  <?php wp_head(); ?>
</head>

 

functions.php ファイルの準備

【functions.php】ファイルがまだない場合は作成します。

現在開いてるテーマフォルダ の【index.php】と同じ階層に【functions.php】ファイルを作成し <?php  ?> と記述して保存します。

<?php

?>

 

add_action() の設置

【functions.php】に add_action() を設置して wp_head() 関数からスタイルシートファイルの指定を出力してみます。

wp_head アクションフック はユーザーのテンプレート内の <head></head> セクションにおいて、wp_head() 関数を呼び出したときに起動されます。これはテーマに依存しますが、最も重要なテーマのフックの1つであるので、かなり広くサポートされています。

WordPress Codex : プラグイン API/アクションフック一覧/wp head

 

特定のアクションに関数をフックします。この関数は add_filter() のエイリアスです。

WordPress Codex : 関数リファレンス/add action

add_action( $hook, $function_to_add, $priority, $accepted_args )

 

パラメータ
引数 説明
$hook
文字列
必須
$function_to_add がフックされるアクション名。テーマまたはプラグインファイル内のアクション名も指定できる。または特別なタグ “all” を使えば、すべてのフックで関数が呼び出される。
初期値:なし
$function_to_add
コールバック
必須
フックする関数名。注: 'callback' タイプとして PHP ドキュメンテーションに掲載されている文字列形式構文のみが有効
初期値:なし
$priority
整数
オプション
特定のアクションに関連づけられている関数が実行される優先順序を指定する。少ない数であれば早く実行され、同じ数の優先度である関数はアクションに追加された順序で実行される。
初期値:10
$accepted_args
整数
オプション
フックした関数が受け入れられる引数の数。WordPress 1.5.1 以降では、フックした関数は、対応する do_action() あるいは apply_filters() が実行される時に、余分に引数を取ることができます。例えば、アクション comment_id_not_found は、これにフックする関数に、リクエストされたコメントの ID を渡すことができます。
初期値:1

 

戻り値
真偽値 常に true

 

wp_enqueue_scriptsをアクションフックに使います
add_action('wp_enqueue_scripts', '任意のファンクション');

WordPress Codex : Plugin API/Action Reference/wp enqueue scripts

 

スタイルシートファイルの情報を登録します

WordPress の生成するページへ CSS スタイルを安全に追加もしくはキューに加えます。wp_register_style() で先に登録されていればこのハンドルで追加できます。

WordPress Codex : 関数リファレンス/wp register style

 

WordPress が生成したページに CSS スタイルファイルを安全に (キューへ) 追加します。wp_register_style() で最初に登録されていれば、そのハンドルを使って追加することができます。

WordPress Codex : 関数リファレンス/wp enqueue style

 

【functions.php】に記述します。

<?php
  function register_style() {
    wp_register_style('style', get_stylesheet_uri(), array(), false, 'all');
  }
  function add_stylesheet() {
    register_style();
    wp_enqueue_style('style');
  }
  add_action('wp_enqueue_scripts', 'add_stylesheet');
?>

 

保存してブラウザで確認します。
背景が薄いグレーになっていれば完了です。

 

Code Tips minimum Theme

【index.php】

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
 <meta charset="<?php bloginfo( 'charset' ); ?>">
 <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
 <?php wp_head(); ?>
</head>
<body>
 <h1>Hello World!</h1>
 <p>Simple Theme</p>
</body>
</html>

 

【style.css】

/*
Theme Name: ctips-minTheme
*/
body {
  background-color: #f0f0f0;
}

 

【functions.php】

<?php
  function register_style() {
    wp_register_style('style', get_stylesheet_uri(), array(), false, 'all');
  }
  function add_stylesheet() {
    register_style();
    wp_enqueue_style('style');
  }
  add_action('wp_enqueue_scripts', 'add_stylesheet');
?>