リスキリングに役立つ情報がいっぱい!トップページ

functions.phpの使い方とアイチャッチ-ワードプレス(WordPress)テーマ自作-

あと、GW明けで忙しかったのでちょっと記事投稿出来てませんでした。
まあどーでもいいですね。続きをやってきましょう!

ちなみにこの記事は連載モノです。前回まででは、WordPressテーマの記事ページと固定ページを作ってそれなりに形にしました。

[clink url=”https://www.namalog.org/wordpress-mytheme-4/”]

しかし、画面上部のメニューバーをWordpressのダッシュボードから編集できなかったり、

投稿ページを作っても投稿ページをまとめて表示するページやリンクが無いためサイトから直接投稿ページを見られなかったり。。

ウィジェットも無かったりとWordPressテーマとしてはどうなの。。という感じなので、よりしっかりと作りこんでいきます。

今日はその一環として、記事ページのサムネイルをつけられる設定をしていきたいと思います。

タッチできる目次

WordPressのアイチャッチを追加しよう!

記事のサムネイルとは?

俗にいうアイチャッチの事ですね。

記事一覧ページや、合わせて読みたいページのリンクを貼る時の見栄えをよくするために非常に重要な要素です。

これのこと↑

あたかも初めからついているように見えますが、実はとある設定をしないと使えない機能なんです、これ。

設定と言っても、とあるファイルにとある文章を書くだけなんですが、ファイルと文章、別々に説明していきましょう。

functions.phpとは?

まずはこれです。
専門用語少なめで説明しておきますね。

WordPressにはほとんどの場合「functions.php」というファイルがあります。
これは「WordPressで使いたい機能をまとめて書いておくシステムファイル」のようなもので、サイト上に表示される事はありませんがWordPressテーマの機能を一心に背負うすごいやつです。

先ほどアイチャッチはとある設定をしないと使えないと言いましたが、この設定も「functions.php」に書きこむものになります。

functions.phpを作ろう。

これは非常に簡単です。

テーマのindex.phpやpage.phpがある場所に、新規に「functions.php」というファイルを作りましょう。

あとはこの中に、このテーマで使いたい機能(今回はアイチャッチ設定機能のみですが、、)をどんどん書き込めばよいのです。

アイチャッチ設定機能を書き込もう

では早速、[functions.php]を開き以下のコードを打ち込んでください。

<?php
function TST_setup() {  //セットアップ時に以下の処理を実行する
  //ここに関数の中身を記述します。
  add_theme_support( 'post-thumbnails' ); //アイキャッチ設定機能をON
add_action( 'after_setup_theme', 'TST_setup' );  //上で書いた処理をセットアップ時に実行させる

それぞれの意味を見ていきます。

まず一番上の
function TST_setup() {  }
ですが、これは 「TST_setup」 という1つのシステム(関数)を作り、{}の中にいろいろな処理を書いて言っている状態です。
何個もの処理を1つの処理にまとめてる感じですね。

また、実行する処理の名前を「TST_setup」としてあります。

次は書いてある通り。
add_theme_support( ‘post-thumbnails’ );
はアイチャッチ設定機能をONにしてね、というコードです。

最後に
add_action( ‘after_setup_theme’, ‘TST_setup’ );
は、上で「TST_setup」と名付けた処理を、テーマのセットアップ時、つまり表示時に行ってね。というコードになります。

少し複雑ですが、要はテーマのセットアップ時にアイチャッチ設定機能をONにしてね、と指示を書いているわけです。

これにて、アイチャッチ設定機能が使えるようになります。

確認してみるとアイチャッチの設定ができるようになっているはずですよ!!

ちなみに、コードは追加できる

ちなみにですが、「functions.php」に書いた

<?php
function TST_setup() {  //セットアップ時に以下の処理を実行する
  //ここに関数の中身を記述します。
  add_theme_support( 'post-thumbnails' ); //アイキャッチ設定機能をON

というコードですが、これは{}の中にいろいろな処理を書いて何個もの処理を1つの処理にまとめていると説明しました。

ここで、こんな風に思った方も居たはず。

  1. え、処理はアイチャッチの1つだけやん
  2. でも処理をまとめられるってことはもしや、、?

そう、あえて触れませんでしたが、「//ここに関数の中身を記述します。」以降の部分には、どんどん使いたい機能を書いていくことができます。

そしてそれらは「TST_setup」という1つの処理にまとまっているので、もちろん
add_action( ‘after_setup_theme’, ‘TST_setup’ );
のみで一気に実行できます。

まとめと次回予告

さて、今回は「functions.php」とアイチャッチ設定機能の追加について説明しました。

前回まではWordPressテーマの外見、今回からはテーマとしての機能を充実させていきます。

次回はメニューバーをWordpressのダッシュボードから設定できるようにしていこうと思います。

では~

次の記事が出ました!↓

[clink url=”https://www.namalog.org/wordpress-mytheme-6″]

では今回はここまで。

記事を気に入っていただけたら、

TwitterやYoutubeでも毎日クリエイトしたことを発信しているのでぜひ覗いてみてね!

\ 毎日学んだクリエイティブを発信中! /

\ 3DCGデザインに興味があるならこれ!/

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
タッチできる目次