今までいくつか紹介してきた記事のまとめです。
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>
コメントを残す