LION MEDIA カスタムヘッダーでトップページをカスタマイズ

LION MEDIAでカスタマイズしたかったことの中にLION MEDIAのトップページのヘッダーで使われてるピックアップ記事とヘッダー画像を一緒にヘッダーで使えるようにLION MEDIAをカスタマイズしたいと思っていたのでやってみました。

以前に私がLION MEDIAのピックアップ記事をヘッダー画像にカスタマイズした方法だとピックアップ記事は表示できないカスタマイズなので、今回のヘッダーカスタマイズはピックアップ記事もヘッダー画像も表示させることが出来るようなカスタマイズ方法です。

カスタマイズに使用したのはWordPressのカスタムヘッダーです。
カスタムヘッダーを使用するとLION MEDIAのトップページのカスタマイズがやりやすくなります。

1. LION MEDIAで使うカスタムヘッダーとは？
2. カスタムヘッダーをLION MEDIAに使う方法
3. カスタマイズヘッダーをピックアップ記事の上に表示
4. ピックアップ記事の下にカスタムヘッダーを表示
5. カスタムヘッダーが設定しやすいカスタマイズ方法
6. LION MEDIAヘッダー画像を動画にカスタマイズ(未完成編)

LION MEDIAで使うカスタムヘッダーとは？

WordPressにはテーマ機能の中に「カスタムヘッダー」があります。
カスタムヘッダーはWordPressテーマに機能を持たせるために使います。

WordPressのカスタムヘッダーはversion2.1から導入されていて、version3.4からはfunctions.phpにカスタムヘッダーサポートのadd_theme_support()を使ってカスタムヘッダーを呼び出します。

LION MEDIAでテーマ機能を動作させる方法もfunctions.phpで呼び出す方法になるので、ヘッダー画像とピックアップ記事を同時に使用できるように、まずは関数を使用してダッシュボードに機能追加をします。

カスタマイズ前にはバックアップを取っておくことをおすすめします。

まだLION MEDIAを使用してなくて、これからカスタマイズしたいと思ってる場合は、LION MEDIAのインストールとカスタマイズ設定をしてからカスタムヘッダーでLION MEDIAをカスタマイズしてください。

LION MEDIAを使うときのインストール方法

LION MEDIA カスタマイズ設定の使い方［LION用］全17設定

カスタムヘッダーをLION MEDIAに使う方法

add_theme_support( 'custom-header' );

上のコードをfunctions,phpに記述するとLION MEDIAでカスタムヘッダーが使えるようになるのですが、ヘッダー画像のサイズとかも調整できるような使い方にしたいので少し変更します。

参考資料関数リファレンス/add theme support

// カスタムヘッダーを追加する（幅px、高さpx）
$defaults = array(
    'default-image'          => '',
    'random-default'         => false,
    'width'                  => 2000,
    'height'                 => 400,
    'flex-height'            => false,
    'flex-width'             => false,
    'default-text-color'     => '',
    'header-text'            => true,
    'uploads'                => true,
);
add_theme_support( 'custom-header', $defaults );

上のphpコードをfunctions.phpの子テーマに貼り付けます。

widthとheightでヘッダー画像の幅と高さを指定します。

width(幅)950px、height(幅)250pxくらいがいいかなぁとおもって始めにやってみたのですが、幅が寸足らずになるし高さもイマイチなので、width(幅)2000px、height(幅)400pxに変更してます。heightは400までサイズを上げないと「画像切り抜き」と「切り抜かない」のパターンが表示できなかったので400くらいがベストかもしれません。widthはブラウザ画面いっぱいにして2000がいいと思いました。

ヘッダー画像に使用するサイズについては私より得意な方が多いと思うので、臨機応変にサイズ調整お願いします。

flex-width
flex-height

flex-が付く内容は、カスタマイズするヘッダー画像を切り抜くときのサイズに反映する指定でfalseだと画像切り抜きが指定したサイズ内でしか切り抜けませんが、trueに変更すると横と縦の画像切り抜きが自由に決めることができます。横はfalseでいいかと思います。

上のphpコードをfunctions.phpに貼り付けて更新したら、ダッシュボードを見ると外観の中にヘッダーと表示されたのがカスタムヘッダーを操作するところです。

カスタムヘッダーの操作も少し説明します。

ヘッダーから進むと新規画像でカスタムヘッダー用の画像を追加します。

画像追加したらカスタムヘッダー画像を切り抜きます。

先ほどカスタムヘッダーを追加するコードで説明したflex-widthとflex-heightのサイズ指定範囲が点線の枠の操作です。

これでLION MEDIAでカスタムヘッダーを使えるようになりますが、次はいよいよLION MEDIAのトップページにカスタムヘッダーを表示させるためのカスタマイズをしていきます。

カスタマイズヘッダーをピックアップ記事の上に表示

LION MEDIAヘッダーカスタマイズは3パターンできたので、パターン1としてピックアップ記事の上にカスタムヘッダーをカスタマイズした表示方法から説明します。

以下のphpをindex.phpに記述します。

<?php if (is_front_page() || is_home()) : ?>
　<?php if (get_header_image()) : ?>
　<a href="<?php echo esc_url(home_url('/')); ?>">
　<img src="<?php header_image(); ?>" class="header-image"
 alt="<?php bloginfo('name'); ?>" /></a>
<?php endif; ?>
<?php endif ?>

1行目　フロントページまたはトップでヘッダー画像の表示をするような条件にしてます。
2行目　ヘッダー画像があるかどうかget_header_imageで調べてます。
3行目　画像を表示するトップページへのリンクを追加
4行目　header_imageで画像URLの出力をして、その画像にheader-imageとclass名をつけてます。
5行目　画像のalt属性をサイト名に設定してます。

header_imageはヘッダー画像のURLを返します。

index.phpに貼り付ける場所は35行目辺りのピックアップ記事関係の記述が書いてあるところ

<div class="key<?php if(get_option('fit_function_pickupSp')): ?> u-none-sp<?php endif; ?>">

上記のコード部分の上に貼り付けます。

そのあとに外観ヘッダーからheaderにするカスタムヘッダーの画像を追加します。

ローカル環境なのでサイトデザイン気にしないで欲しいのですが、カスタムヘッダーをピックアップ記事の上に表示した例は上の画像のような感じになります。

カスタムヘッダーとピックアップ記事の感覚が気になる方は適宜で調整してください。

ピックアップ記事の下にカスタムヘッダーを表示

パターン2はカスタムヘッダーをピックアップ記事の下に表示するカスタマイズ方法です。

phpコードは先ほどと同じコードを使用します。
貼り付け場所が変更になります。

<?php endif; ?>
<!-- l-wrapper -->

LION MEDIAのindex.phpでwrapperが始まる上のkey関係のendifのすぐ上に先ほどのコードを移動すると、ピックアップ記事が上になってカスタムヘッダーは下に表示できます。

このカスタマイズの表示順番だと、LION MEDIAのピックアップ記事とアーカイブの間にカスタムヘッダーの画像がワンクッション入るので、トップページがアイキャッチだらけって感じてしまう印象が軽くなるかもしれません。

そしてindex.phpにphpを貼り付けたカスタマイズパターンでは、LION MEDIAのトップページにカスタムヘッダーの表示はできるのですが、ピックアップ記事で使われてるkeyクラスの中で読み込んでるのでピックアップ記事の設定をOFFにしたり、スマホだけ非表示にするとピックアップ記事と一緒にカスタムヘッダーの画像も機能しなくなってしまいます。

なのでピックアップ記事とセットでカスタムヘッダーを使用していくなら、LION MEDIAのピックアップ記事設定でOFFにするだけで済むので、index.phpを使用するカスタマイズパターンの使い勝手がよくなります。