WordPressのhead内はたった4行!すべて動的にしよう!

///WordPressのhead内はたった4行!すべて動的にしよう!

WordPressのhead内はたった4行!すべて動的にしよう!

あなたはまだhead内の設定をheader.phpに書いてますか?
phpに記述するheadの中身は4行でいいんです!

代わりにfunction.phpに設定をしていき、管理画面ですべて設定していきましょう。

 header.phpに記載するheadの中身

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<?php wp_head(); ?>
</head>

これだけです。かんたんでしょう?

cssとjavascriptを読み込むには

wordpressにcssやjavascriptを読み込むには、head内に記載するのではなく、
function.phpにwp_enqueue_scriptsというのを使ってつくっていきます。

<?php 

function original_enqueue_scripts() {

  // cssの読み込み
  wp_enqueue_style(
    'style', // システムで使う名前
    get_stylesheet_uri(), // style.cssを読み込む
    array('before_style'), //  読み込む前に読み込まれるべきスタイル。システムで使う名前を入れる
    filemtime( get_stylesheet_directory() . '/style.css' ) // バージョンの自動生成
  );


  // jsの読み込み
  バージョン
  wp_enqueue_script(
    'bundle', // システムで使う名前
    get_template_directory_uri() . '/js/bundle.js', // 読み込むjavascript
    array( 'jquery' ), // 先に読み込むjavascript
    '1.0.0', // バージョン
    true // trueなら</body>の前に、falseならhead内に出力する
  );

  // 決まり文句として入れておこう
  if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
  }
}
add_action( 'wp_enqueue_scripts', 'original_enqueue_scripts' );

?>

wp_enqueue_scriptsは適切な箇所でcssやjavascriptを読み込むことができます。
これによって、Wordpress自身が読み込むcssやjavascriptとの変な不都合が減ります。

head内にtitleを入れるには

wordpress4.5以降からtitleタグを自動で入れてくれるものが出てきました。

<?php
function title_setup(){

  // タイトルタグを動的に出力してくれる
  add_theme_support( 'title-tag' );
  
}
add_action( 'after_setup_theme', 'title_setup' );
?>

これをfunction.phpに入れるだけで、head内にtitleが勝手に入ってくれます。便利ですね。
ホームでは「サイトタイトル – ディスクリプション」、それ以外では「ページタイトル – サイトタイトル」が入ります。
その設定が嫌な場合はhead内に記載していきましょう。

<?php if ( is_front_page() || is_home() ) : ?>
  <title><?php bloginfo( 'name' ); // 管理画面で設定されているタイトル ?></title>
<?php endif; ?>

など、条件分岐を使って設定していきましょう。
分岐に設定されていないページは自動的に出力されます。

SEOの設定をしたいんだけど!!!

素直にwordpressのSEOプラグインを使いましょう・・・

All in One SEO Packだったり、Yoast SEOだったりが有名かと思います。

どちらも必要なシステムは揃っていますので、これを入れて設定してください。

ファビコンの設定?

管理画面 > 外観 > カスタマイズ > サイト基本情報 > サイトアイコン

ここに画像を入れましょう。そうするとhead内にfaviconの設定が入ります。
これに関してはそれ以外する必要はありません。お得ですね!

ただ古いブラウザように設定しないといけない場合は

<link rel="shortcut icon" href="<?php get_template_directory_uri(); ?>/favicon.ico">

をhead内に入れるなどの設定が必要になるのでご注意ください


まとめ

私も前は静的にhead内のメタタグなどをheader.phpに入れていましたが、メンテナンスが大変だったり、
多人数で作業を行うときのバージョン管理であたふたした記憶がありました。

せっかくのCMSを使っている利点をどんどん活かしていってはいかがでしょうか!

2016-12-06T18:22:41+00:002016/12/07|Categories: WEB, Wordpress|

コメントする

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください