expexp.jp

WordPress

【WordPress】headタグ関連の出力を自由に行いたい

今までいくつか紹介してきた記事のまとめです。

WordPressテーマでタイトルやmetaタグ、OGPも含めたheadタグ関連の出力を自由に行う例をまとめて紹介します。

関数作成

まずはfunctions.phpに出力用の関数を記述します。

functions.php

// テーマでタイトルタグを使えるようにする
add_theme_support( 'title-tag' );

// ドキュメントタイトル
function get_page_title() {
  // ページタイトルを取得
  $page_title = wp_get_document_title();

  return $page_title;
}


// OGP Type
function get_ogp_type() {
  // 記事ページの場合
  if(is_single()) {
    $og_type = 'article';
  }

  // 上記以外の場合
  else {
    $og_type = 'website';
  }

  return $og_type;
}


// Canonical
function get_canonical_url() {
  $protocol = is_ssl() ? 'https://' : 'http://';
  $canonical_url = $protocol . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
  return $canonical_url;
}


// Description
function get_description() {
  // 記事ページの場合
  if(is_single()) {

    // 投稿画面で入力した抜粋を出力用の変数へ代入
    $description = get_the_excerpt();
  }

  // 抜粋が無い場合
  if(empty($description)) {
    
    // 通常通りキャッチフレーズを出力
    $description = bloginfo('description');
  }

  return $description;
}


// OGP image
function get_article_img_url() {
  // 記事ページの場合
  if(is_single()) {

    // 記事のアイキャッチURLを取得し、出力用の変数へ代入
    $article_img_url = get_the_post_thumbnail_url();
  }

  // アイキャッチURLが取得できなかった場合
  if(empty($article_img_url)) {

    // テーマディレクトリからサイトの画像を出力
    $article_img_url = get_template_directory_uri().'/img/siteimg.png';
  }

  return $article_img_url;
}

テーマに出力

次にテーマ上の出力したい場所に作成した関数やWordPressのタグを記述します。

head関連のテーマファイル記述例

<!DOCTYPE html>
<html lang="<?php bloginfo('language'); ?>">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="<?php bloginfo('charset'); ?>">
<meta property="og:title" content="<?php echo get_page_title(); ?>">
<meta property="og:type" content="<?php echo get_ogp_type(); ?>">
<meta property="og:description" content="<?php echo get_description(); ?>">
<meta property="og:url" content="<?php echo get_canonical_url(); ?>">
<meta property="og:image" content="<?php echo get_article_img_url(); ?>">
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="og:locale" content="ja_JP">
<meta name="description" content="<?php echo get_description(); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="rating" content="General">
<meta name="referrer" content="unsafe-url">

<link rel="index" href="<?php echo home_url('/'); ?>" title="<?php bloginfo('name'); ?>">

<link rel="icon" href="<?php echo get_template_directory_uri(); ?>/img/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="<?php echo get_template_directory_uri(); ?>/img/favicon-32.png" sizes="32x32" type="image/png">

<link rel="apple-touch-icon" href="<?php echo home_url('/'); ?>apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="<?php echo home_url('/'); ?>apple-touch-icon.png">

<?php wp_head(); ?>
</head>