functions.phpの作成 - WordPressテーマを自作する第6回【WordPressテーマテンプレートの構築2】

WordPress 2023年10月09日更新 / 2020年02月27日作成

functions.phpの作成 – WordPressテーマを自作する第6回【WordPressテーマテンプレートの構築2】

連載「WordPressオリジナルテーマを自作する」第6回です。

前回の「WordPressテーマを自作する第5回【テーマテンプレートの構築１】」に引き続き、WordPressのテーマテンプレートを作成していきます。

第1回記事は↓こちら。

WordPressテーマを自作する第1回 – ブログのサイト設計をする

どうもこんにちは、ケイジです。ウェブ制作を生業として、WordPressのテーマやプラグイン作成、カスタマイズをメインに日々暮らしています。 WordPressは便利なブログツールでフリーテーマなどが豊富にあります。 …

今回はfunctions.phpを作成します。

functions.phpを作成する

functions.phpとは

functionsを日本語訳すると「機能」。

その名の通りテーマで使う様々な機能を定義するファイルが、functions.phpです。

style.cssを読み込む

まずは、スタイルシート（style.css）を読み込む処理を書いていきます。
style.cssはheader.phpに直接読み込むhtmlを書いても動作するのですが、functions.phpにwp_enqueue_style()関数を記述する正式な方法で読み込みます。

<?php

// style.cssを読み込む
function read_enqueue_styles() {
  wp_enqueue_style( 'main-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'read_enqueue_styles' );

余計なheader内記述を消す

header.phpにwp_head()を記述することで、色々と必要なコードをheadタグ内に書き出してくれるのですが、WordPressのバージョン表示や次の投稿や前の投稿へのリンクなど、不必要な情報まで書き出されます。

特にHTMLソースにWordPressのバージョンなどが表示されていると、不正攻撃の対象にもなりかねないので不必要な記述は削除しておきます。

先程のfunctions.phpに追記します。

<?php

// style.cssを読み込む
function read_enqueue_styles() {
  wp_enqueue_style( 'main-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'read_enqueue_styles' );

// ↓ ここから追記
// rel="prev"とrel=“next"表示の削除
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head');

// WordPressバージョン表示の削除
remove_action('wp_head', 'wp_generator');

// 絵文字表示のための記述削除（絵文字を使用しないとき）
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

// アイキャッチ画像の有効化
add_theme_support('post-thumbnails');

前回、header.phpに書いたスタイルシートの読み込み処理はwp_head()で読み込んでくれるので消しちゃっていいです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
	<link rel='stylesheet' href='./assets/css/reset.css' type='text/css' media='all'>
	<!-- ↓ この行を削除 -->
	<!-- <link rel='stylesheet' href='./style.css' type='text/css' media='all'> -->
	<title>cage.tokyo</title>
	<?php
		wp_head();
	?>
</head>
<body>
	<main>
		<header>
			<div class="container">
				<div class="header_logo"><img src="http://placehold.jp/120x24.jpg" alt="logo"></div>
				<ul class="header_about">
					<li class="header_about_item">
						<a href="/about">about</a>
					</li>
					<li class="header_about_item twitter">
						<a href="#" target="_new">
							tw
						</a>
					</li>
				</ul>
			</div>
		</header>
		<nav>
			<div class="container">
				<ul class="nav_list">
					<li class="nav_list_item"><a href="#">WordPress</a></li>
					<li class="nav_list_item"><a href="#">プログラミング</a></li>
					<li class="nav_list_item"><a href="#">iPad</a></li>
					<li class="nav_list_item"><a href="#">マーケティング</a></li>
					<li class="nav_list_item"><a href="#">デザイン</a></li>
					<li class="nav_list_item"><a href="#">ボルダリング</a></li>
					<li class="nav_list_item"><a href="#">コラム</a></li>
				</ul>
			</div>
		</nav>

今回まででひと通り次のファイルを作成しました。