【YouTube講座】WordPress開発講座#06 functions.phpでサムネイル画像を表示しようの概要
WordPress開発講座#06 functions.phpでサムネイル画像を表示しよう
【YouTube講座】WordPress開発講座 #06
谷口まことさんの ともすたチャンネル
を視聴しました。勉強したことを、アウトプットします。
functions.php とは
テンプレート階層には含まれていないが、非常に重要なファイルが一つあります。
functions.php です。
WordPressでは、機能を拡張するためのファイルとして、テーマの中に一つ作ることができます。
functions.phpでは様々なことができます。
前回作ったサイトには、タイトルタグが入っていません。
前回までの勉強では、<head>の中の<title>タグは消していました。
自分で、タイトルタグ<title>を入れると制御しにくくなります。
WordPressが、自動的に最適なタイトルタグを作って表示してくれる機能がありますが、今は、働いていない状態です。
使える状態にしていきましょう。
function init_func(){
add_theme_support('title-tag');
}
add_theme_support は、WordPressの関数になります。
add_theme_support('title-tag')は、WordPressのタイトルタグを作るのをサポートするよと指定しています。
add_action は、関数です。
WordPressには、アクションフックというのがあり、init は初期化という意味です。
画面を表示する直前に、init というフックを取り出して、init_func という関数を機能させます。
タイトルタグは、「ブログ名＋キャッチフレーズ」が指定されています。
ダッシュボード、設定、一般 にいってみます。
サイトのタイトル：
キャッチフレーズ：
を変更して、トップページに行くと、反映されていることがわかります。
function init_func(){
add_theme_support('title-tag');
}
add_action('init','init_func');
アイキャッチ画像を投稿できるようにする
ダッシュボードの投稿画面に行ってみましょう。
アイキャッチ画像を作るボタンがありません。
add_theme_support('post-thumbnails');
を指定することで、
投稿画面に、アイキャッチ画像を設定するボタンが出てきました。
フリーの画像（写真）を借りてきて、アイキャッチを指定してみましょう。
ブログサイズのMサイズをダウンロードして、
ファイルアップロードします。
single.phpに、サムネイル画像を取るには、
<?php the_post_thumbnail(); ?>
を書き入れてみます。
<!-- Page Header -->
<header class="masthead" style="background-image: url('<?php echo get_template_directory_uri(); ?>/img/post-bg.jpg')">
⬇
<!-- Page Header -->
<?php the_post_thumbnail(); ?>
<header class="masthead" style="background-image: url('<?php echo get_template_directory_uri(); ?>/img/home-bg.jpg')">
投稿画面を表示すると、アイキャッチ画像と共に、Bootstrap が元々テンプレートに設定していた画像が表示されているままです。
<!-- Page Header -->
the_post_thumbnail();
<header class="masthead" style="background-image: url('<?php the_post_thumbnail(); ?>')">
と書き直してみましょう。
元の画像は消えていますが、アイキャッチに設定した画像も表示されません。
<?php the_post_thumbnail(); ?>
は、url のパラメータには使えません。
まず、id を取ってきます。
<?php
$id = get_post_thumbnail_id();
$img = wp_get_attachment_image_src($id); ?>
background-imageのURLを書き直します。
<!-- Page Header -->
<header class="masthead" style="background-image: url('<?php echo get_template_directory_uri(); ?>/img/post-bg.jpg')">
⬇
<?php
$id = get_post_thumbnail_id();
$img = wp_get_attachment_image_src($id); ?><!-- Page Header -->
<header class="masthead" style="background-image: url('<?php echo $img[0]; ?>')">
アイキャッチ用にアップロードした画像が、表示できました。