ペンギンスタート

WordPress「add_theme_support」で有効化できるテーマ機能一覧

HOME > アーカイブ > WordPress > テーマ開発 > WordPress「add_theme_support」で有効化できるテーマ機能一覧

WordPressのテーマに機能を追加するためのテンプレート関数がadd_theme_supportである。functions.phpに記述すると有効化できる機能を確認する。

コード

add_theme_supportでテーマに追加できる機能は以下のとおり。

// 投稿フォーマット
add_theme_support('post-formats', array('aside', 'gallery'));
// アイキャッチ有効化
add_theme_support('post-thumbnails');
// カスタム背景
add_theme_support('custom-background'); //引数を取れる
// カスタムヘッダー
add_theme_support('custom-header'); //引数を取れる
// フィードリンク
add_theme_support('automatic-feed-links');
// HTML5（コメントフォーム、検索フォーム、コメントリスト、ギャラリー）
add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption'));
// script要素やstyle要素のtype属性の出力を無効化、version 5.3 以降
add_theme_support( 'html5', array( 'script', 'style' ) );
// titleタグ有効化
add_theme_support('title-tag');
// メニュー有効化
add_theme_support('menus');

投稿フォーマットを有効化

投稿フォーマットは初期状態では無効なので、functions.phpにコードを書いて有効化する必要がある。


add_theme_support('post-formats', array('aside', 'gallery'));

これにより、エディターに投稿フォーマットが表示され、アサイドとギャラリー＋標準の中から選択できるようになる。

使用可能な投稿フォーマット

aside（アサイド）通常タイトルなしで表示
gallery（ギャラリー）画像ギャラリー。ギャラリーショートコードと添付画像を含む投稿など
image（画像）単独の画像。投稿本文内の最初の タグが画像と見なされる
link（リンク）他サイトへのリンク。投稿本文内の一つ目の<a>タグがその投稿の外部リンクと見なされる
quote（引用）引用文
status（ステータス）通常140程度の短い近況アップデート
video（動画）単独の動画、または動画のプレイリスト。投稿本文内の最初の
audio（音声）音声ファイル、またはプレイリスト
chat（チャット）チャット履歴

自作投稿フォーマットを追加する方法

まず確認だが、投稿フォーマットを有効化するためのコードをfunctions.phpに記述する必要はない。ただし投稿フォーマット有効化と自作投稿フォーマット追加は併用しても問題ない。

新規テンプレートファイルを作成する

single.phpやpost.phpの複製でも良いので、拡張子が.phpのファイルを作成する。

  • format-test.php を作成

新規テンプレートの先頭に「フォーマット名」を記述する

フォーマット名は「フォーマットテスト」とし、続けてテンプレートを使用する投稿タイプを設定する。postは投稿ページで、pageは固定ページでオリジナルテンプレートを選択し使用できるようになる。


<?php
/**
 * Template Name: フォーマットテスト
 * Template Post Type: post,page
 */
?>

サーバーにアップロードする

テーマフォルダのstyle.cssと同じ階層にアップロードする。

  • public_html
    • wp-content
      • themes
        • company01 // 有効化したテーマ
          • format-test.php // ここにアップロードする
          • style.css

エディターに登録される

投稿ページや固定ページのエディターの右パネルにテンプレートが出現し、テンプレートを選択することができるようになる。

投稿フォーマットと紛らわしいが、別の設定であることが確認できる。

アイキャッチの有効化

アイキャッチを有効化するために、functions.phpにコードを記述する。


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

これによりサポートが追加され、アイキャッチ画像のメダボックスが投稿・固定ページの編集画面に表示される。

またアイキャッチを有効化する投稿タイプを設定することもできる。


add_theme_support('post-thumbnails', array('post'));  // 投稿のみ
add_theme_support('post-thumbnails', array('page'));  // 固定ページのみ

アイキャッチ登録の有無をチェックして出力する

アーカイブページなどにアイキャッチを表示させている場合、投稿にアイキャッチが割り当てられているのかどうかチェックする必要がある。アイキャッチ設定もれがあるかもしれないためだ。


// 投稿に投稿サムネイルが割り当てられているかチェックする
<?php
if (has_post_thumbnail()) :
  the_post_thumbnail();
endif; ?>

アイキャッチを表示するためにthe_post_thumbnail()を使用したが、用途によって別の関数を使い分けることもできる。

get_the_post_thumbnail()
投稿やページの編集画面で設定することができるアイキャッチ画像を取得する。
設定されていればアイキャッチ画像を出力する HTML 画像エレメントを返し、設定されていなければ空文字列を返す

get_the_post_thumbnail()
投稿やページの編集画面で設定することができるアイキャッチ画像を取得する。
設定されていればアイキャッチ画像を出力する HTML 画像エレメントを返し、設定されていなければ空文字列を返す

表示するサムネイルのサイズを変更する

the_post_thumbnail()の引数にサイズを渡す。


the_post_thumbnail('thumbnail'); // 小サイズ 縦横最大150px
the_post_thumbnail('medium');    // 中サイズ 縦横最大300px
the_post_thumbnail('large');     // 大サイズ 縦横最大1024px
the_post_thumbnail();            // オリジナルサイズ

クラス名を付与する

クラス名としてclass-nameを付与したアイキャッチ画像を表示させる。


if ( has_post_thumbnail() ) {
  $attr = array(
    'class' => 'class-name',
  );
	the_post_thumbnail('thumbnail', $attr);
  //the_post_thumbnail('画像サイズ', 配列);
}

これにより、<img>タグにクラス属性class-nameが追加される。

別の書き方では、


<?php the_post_thumbnail('medium', array('class' => 'alignleft')); ?>

次のようなHTMLが生成される。


<img src=... class="alignleft wp-post-image" ...>

アイキャッチ画像がない時に別の画像を表示する

アイキャッチ画像が登録されていない時に表示するデフォルトのアイキャッチ画像を登録しておく。

テーマフォルダ内にデフォルトのアイキャッチ画像を登録

準備したdefault-thumbnail.pngをテーマフォルダにアップロードする。

  • public_html
    • wp-content
      • themes
        • company01 // テーマフォルダ
          • images
            • default-thumbnail.png // デフォルトアイキャッチ画像

プログラムの書き方


<?php
if (has_post_thumbnail()) :
  the_post_thumbnail('thumbnail');
else : ?>
  <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/default-thumbnail.png>" alt="">
<?php endif; ?>

カスタム背景の有効化

body_class()とwp_head()を配置した上で、functions.phpにカスタム背景を有効化するコードを記述する。


// カスタム背景
add_theme_support('custom-background');

外観＞カスタマイズの左パネルに、色と背景画像が表示されるようになる。

左パネル

色の設定

背景画像の設定

出力されるスタイル

1bodyタグにcustom-backgroundというクラス名が付与される。


<body id="page-top" class="home blog custom-background">

2headタグにインラインでスタイルが追加される。


<style type="text/css" id="custom-background-css">
  body.custom-background { background-color: #dd3333; }
</style>

初期値を設定する


$args = array(
	'default-color' => '000000',
	'default-image' => '%1$s/images/background.jpg',
);
add_theme_support( 'custom-background', $args );

カスタムヘッダーを有効化する

functions.phpにコードを追記する。


// カスタムヘッダー
add_theme_support('custom-header');

オプション設定をする


$custom_header_args = array(
  // デフォルトで表示するヘッダー画像(画像のURLを入力)
  'default-image' => get_template_directory_uri() . '/img/top-main.jpg',
  // ヘッダー画像の横幅
  'width' => 1171,
  // ヘッダー画像の縦幅
  'height' => 640,
  // ヘッダー画像の横幅を自由に切り取れるかどうか(trueもしくはfalse)
  'flex-width' => true,
  // ヘッダー画像の縦幅を自由に切り取れるかどうか(trueもしくはfalse)
  'flex-height' => true,
  // ヘッダーテキストを表示するかどうかを指定する機能の使うかどうか(trueもしくはfalse)
  'header-text' => true,
  // ヘッダーテキストのデフォルトの色
  // 'default-text-color' => 'fff',
  // 動画ヘッダーに対応するかどうか(trueもしくはfalse)
  'video' => true,
  // adminへの画像ファイルのアップロードを許可するか(trueもしくはfalse)
  'uploads' => false,
  // ヘッダー画像をランダムにローテーションするかどうか(trueもしくはfalse)
  'random-default' => false,
  // テーマのheadタグ内に呼び出したいコードが書かれた関数を指定(関数名)
  // 'wp-head-callback' => 'wphead_cb',
  // カスタムヘッダーページのheadタグ内に呼び出したいコードが書かれた関数を指定(関数名)
  'admin-head-callback' => 'adminhead_cb',
  // カスタムヘッダーページのプレビュー部分に表示したいコードが書かれた関数を指定(関数名)
  'admin-preview-callback' => 'adminpreview_cb',
);
add_theme_support('custom-header', $custom_header_args);

ヘッダーテキストカラーのスタイルをheadに挿入する


// ヘッダーテキストカラーをheadタグに挿入
function wphead_cb() {
  echo '<style type="text/css">';
  echo '.p-header__ttl, .p-header__info { color: #' . get_header_textcolor() . ' }';
  echo '</style>';
}

$custom_header_args = array(
  'default-text-color' => '000',
  'wp-head-callback' => 'wphead_cb'
);
add_theme_support('custom-header', $custom_header_args);

ヘッダー画像の上に載せたいテキストのタグにp-header__ttlクラスや、p-header__infoクラスを付与する。

テンプレートを編集する

6行目の<p>にp-header__ttlを付与。


<?php if (get_header_image()) : ?>
  <div class="hero">
    <!--ヘッダー画像出力-->
    <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
    <!--キャッチフレーズ出力-->
    <span class="p-header__ttl"><?php bloginfo('blogname'); ?></span>
  </div>
<?php endif; ?>

CSSで調整する


/* カスタムヘッダー */
.hero img{
    width: 100%;
    height: auto;
    max-height: 650px;
    object-fit: cover;
    vertical-align: top;
}

.hero{
    position: relative;
}
.hero::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: 2px 2px;
}
.hero span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 1.4rem;
    width: 450px;
    z-index: 123;
    letter-spacing: 2px;
    text-align: center;
}

完成

ボリュームのあるカスタマイズだったが、動画の埋め込みやランダム表示など、カスタマイズの幅は残っている。

参考
  • WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ！
    https://original-game.com/wordpress-custom-header/
  • WordPressにカスタムヘッダーの機能を追加して画像を表示する
    https://shu-sait.com/custom-header-tuika/

様々なことができるadd_theme_support


'post-formats',
'post-thumbnails',
'custom-header',
'custom-background',
'custom-logo',
'menus',
'automatic-feed-links',
'html5',
'title-tag',
'customize-selective-refresh-widgets',
'starter-content',
'responsive-embeds',
'align-wide',                 // 画面幅いっぱいの動画や画像を配置
'dark-editor-style',
'disable-custom-colors',
'disable-custom-font-sizes',
'editor-color-palette',         // ブロックエディタで利用できる色をテーマ側で指定
'editor-font-sizes',
'editor-styles',
'wp-block-styles',
'core-block-patterns'
'custom-line-height'          // ブロック設定に「行の高さ」追加

リファレンス

WordPress

ブロック開発
テーマ開発
管理画面
エディタ
サイト構成
マルチサイト
セキュリティ

Web開発

htmlcss
サーバー
ツール