注目キーワード

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

LION MEDIA カスタムヘッダーでトップページをカスタマイズ
  1. HOME
  2. WordPress
  3. WordPressテーマ
  4. LION MEDIA カスタムヘッダーでトップページをカスタマイズ

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

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

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

 

目次

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

 

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

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

 

WordPressにカスタムヘッダーの機能を追加して画像を表示する

 

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に貼り付けて更新したら、ダッシュボードを見ると外観の中にヘッダーと表示されたのがカスタムヘッダーを操作するところです。

 

 

Advertisement

 

 

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

 

 

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

 

 

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

 

 

先ほどカスタムヘッダーを追加するコードで説明した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にするカスタムヘッダーの画像を追加します。

 

 

 

Advertisement

 

 

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

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

 

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

 

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

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

 

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

 

 

 

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

 

 

 

Advertisement

 

 

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

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

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

 

カスタムヘッダーが設定しやすいカスタマイズ方法

 

次のカスタムヘッダーのカスタマイズパターンはLION MEDIAのheader.phpに先ほどと同じphpコードを貼り付けます。この方法はLION MEDIAでカスタムヘッダーとピックアップ記事の表示方法を変更するときの設定が使いやすいパターンです。

 

 

 

header.phpへの貼り付け場所は、header.phpの一番下に書いてある<!-/i-extra->の上です。このパターンの表示は、カスタムヘッダーが上でピックアップ記事が下に位置します。

headerphpの191行目<!-/i-extra->の上にphpコードを貼り付けると、カスタマイズ後に ピックアップ記事設定をOFFにしてもカスタムヘッダーの画像だけは表示されます。

そしてLION MEDIA設定でピックアップ記事はスマホ表示のときは非表示にする設定ができますがheader.php貼り付けパターンなら、設定変更してもカスタムヘッダーだけは表示出来ます。

それぞれのパターンでカスタマイズしてみて、どの方法が使いやすいかカスタマイズしてから実際のカスタマイズヘッダーの画像表示を比べてみると決めやすいです。

 

LION MEDIAヘッダー画像を動画にカスタマイズ(未完成編)

 

ここからは、まだ未完成のことなのでLION MEDIAのヘッダーカスタマイズには動画も使うことができるんだなぁ。くらいで読んでください。カスタムヘッダーを動画にする場合です。

WordPressのテーマ機能カスタムヘッダーのビデオ使用します。

videoはWordPress4.7からサポートされたので、まだ新しい機能です。

 

‘video’ => true,

 

と追加することで、動画機能が使えるようになります。使用できるのはYouTubeとmp4です。

 

<?php the_custom_header_markup(); ?>

 

そして私は上のコードをindex.phpに貼り付けたコードの下に記述しました。追加するとテーマカスタマイザーにヘッダーメディアの項目が追加されてます。

これだけでYouTubeのURLで動画をヘッダーにしたり、mp4をヘッダー画像にしたり実際には出来ますが、まだYouTube動画のサイズと音声出力が上手く調整できていないので未完成カスタマイズです。

 

 

 

 

音声出力についてはwp-includes/wp-castom-header.min.jsでvideoタグをミュートにしているようです。

これを解決する場合はWordPress自体の機能のようで、コアファイルを編集しないで修正するためにはwp-includes/wp-costom-header.jsをコピーしてvideo.muted=’muted’;を削除してから…なんちゃらかんちゃら..とメンドクサイことをするようです。

なので私は、まだいじってないので未完成が完成になったら記事にしたいと思います。ヘッダー動画にするだけなら問題ないので試してみてはいかがでしょうか。

 

記事内では音声出るんですけね…

 

WordPressテーマカテゴリの最新記事