Web制作・プログラミング関連のおすすめレビュー記事はこちら

静的サイトをWordPress化する手順③（functions.phpの作成）

Web制作

今回は第一回の記事で作成したfunctions.phpにコードを記述していきます。

作業に移る前の確認ですが、ファイル名は、

functions.phpです。（sのつけ忘れに注意！！）

一度知ってしまえば、何だそんなことか、という感じかもしれませんがファイル名のミスは初心者のうちはありがちです。（しかも気づきにくいです。）

では早速やっていきましょう。

functions.phpとは？

functions.phpとは、テーマの拡張機能を有効化したり、テーマに独自の機能を実装したりするためのファイルになります。

またテーマの初期設定に関するコードもこのファイルに記述することになります。

さらに、CSSファイルやJavaScriptなどの外部ファイルもfunctions.php上で読み込むことが推奨されています。（一応、従来どおりにheadタグ内などで読み込んでも動作します。）

functions.php内に関数を定義

ファイル内に関数を定義していきます。まずはじめにコードの全体像を紹介してから細かい部分を見ていきましょう。

基本はadd_theme_support();の引数に必要な情報を入れていく感じです。

functions.php
<?php function my_setup()  {   add_theme_support('post-thumbnails');   add_theme_support('automatic-feed-links');    add_theme_support('title-tag');    add_theme_support( 'html5', array(  'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', ) );   } add_action('after_setup_theme', 'my_setup'); ?>

①function my_setup()で関数を定義

関数名（function以下の部分）は任意の名前でOKです。

②add_theme_support();で必要な機能を追加

今回使用した引数を紹介していきます。

✔post-thumnails　→　投稿の際にアイキャッチ画像を設定できるように設定。

✔automatic-feed-links　→　RSSフィードを自動的に<head>タグ内に出力。

✔title-tag　→　<head>タグ内の<title>タグをページに合わせて自動的に出力。

✔html5以降の記述　→　HTML5でコーディングした場合は書いておくほうがベター。

③add_action('after_setup_theme', 'my_setup');　で実行タイミングを設定。

今回の場合はテーマが読み込まれた後のタイミングで、my_setup()関数を実行という意味です。

二番目の引数は①で自分が設定した関数名を記述しましょう。

これで今回の追加機能に関しての記述は終了です。

CSSとJavaScriptの読み込み

次にCSSのやJavaScriptなどの外部ファイルを読み込んでいきます。

基本的には同じ要領なので、読み込むファイル名などは適宜自分のファイル名に変更して記述してください。

<?php function my_setup() {// 関数を定義（任意の名前でOK） add_theme_support('post-thumbnails'); // アイキャッチ画像を有効化 add_theme_support('automatic-feed-links'); // 投稿とコメントのRSSフィードのリンクを有効化 add_theme_support('title-tag'); // タイトルタグを自動生成 add_theme_support( 'html5', array(  'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', ) ); //HTML5をサポート } add_action('after_setup_theme', 'my_setup');// 関数を実行するタイミングを指定  // CSSとjsの読み込み function my_script_init()   { wp_enqueue_script( 'script-name', get_theme_file_uri('/js/script.js'), array( 'jquery' ), '1.0.1', true );     wp_enqueue_style( 'style-name', get_theme_file_uri('/css/style.css'), array(), '1.0.1' );   }   add_action('wp_enqueue_scripts', 'my_script_init'); ?>

細かい説明は省き、わかりやすさ重視で説明します。

この関数ではwp_enqueue_script();でJavaScriptの読み込み、

wp_enqueue_style();でCSSを読み込んでいます。

2つで共通して出てくるget_theme_file_uri('')の中には自分の読み込むファイルまでのパスを記述してください。

これでfunctions.php.の記述はすべて終了です。

✔jQueryのバージョンについて

上記のコードではWordPressに同梱されているjQueryを読み込んでいます。

しかしWordPressに標準で入っているjQueryはver1系であるため、コーディング段階で別のバージョンのjQueryを使っている場合、うまく動かない場合があります。

その場合は、以下のコードを使用しましょう。

  function load_google_cdn() {
    if ( !is_admin() ){
      //jQueryを登録解除
      wp_deregister_script( 'jquery' );
      
      //Google CDNのjQueryを出力
      wp_enqueue_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js', array(), NULL, true );
    }
  }
  add_action( 'init', 'load_google_cdn' );

このコードではif文を使って、管理画面でないときだけ、WordPress同梱のjQueryを解除し、

コーディングで使っているjQuery3.1.0のGoogle CDNを出力しています。

登録画面のときを除外しているのは、WordPress側のプラグインが同梱のjQueryでないと正常に動かないという可能性があるためです。

参考：https://www.1-firststep.com/archives/2069#link-scroll-3

不必要な情報を削除する

ここまでの作業を行ったことで、ファイルから削除すべきものが出てきます。

それは<head> タグ内の<title>タグと、CSSの読み込み、JSの読み込みを行っている部分です。

<title>タグは自動出力するように設定したため、CSSとJSはfunctions.php上で読み込みを行うように設定したためです。

front-page.phpの<head>タグ内（変更前）
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, 
  minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>SAMPLE SITE</title>                     //この一行と
  <link href="/css/style.css" rel="stylesheet"> //この一行を削除します
  <?php wp_head(); ?>
</head>
front-page.phpの<head>タグ内（変更後）
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, 
  minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <?php wp_head(); ?>
</head>
front-page.phpの<footer>タグ付近（変更前）
 <footer class="footer" id="footer">
    <div class="inner">
      <p>Copyright © SAMPLE SITE All Rights Reserved.</p>
    </div>
  </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>
//上の2行を削除します
  <?php wp_footer(); ?>
</body>
</html>
front-page.phpの<footer>付近（変更後）
 <footer class="footer" id="footer">
    <div class="inner">
      <p>Copyright © SAMPLE SITE All Rights Reserved.</p>
    </div>
  </footer>
  <?php wp_footer(); ?>
</body>
</html>

以上で今回は終わりです。

続きは次回の記事で行います。

タイトルとURLをコピーしました