functions.phpの作成 – WordPressテーマを自作する 第6回【WordPressテーマテンプレートの構築2】
連載「WordPressオリジナルテーマを自作する」第6回です。
前回の「WordPressテーマを自作する 第5回【テーマテンプレートの構築１】」に引き続き、WordPressのテーマテンプレートを作成していきます。
第1回記事は↓こちら。
今回は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>今回まででひと通り次のファイルを作成しました。
- stylesheet.css（スタイルシート兼テーマ定義）
- index.php（トップページ）
- header.php（ヘッダーパーツ）
- footer.php（フッターパーツ）
- sidebar.php（サイドバーパーツ）
- functions.php（機能ファイル）
さて、今回はここまで。
次の記事は↓こちら。
関連記事
[PR] 当ブログ「cage.tokyo」はさくらのレンタルサーバ・スタンダードで運用しています。WordPressでのブログが運用しやすく、おすすめです。
