wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

ワードプレス・ブログメディアで、ヘッダー画像を変える2通りの方法【phpモバイル非表示有】

      2017/09/24

こんにちは、管理人@SS_mshpです。

今回は、ワードプレス・ブログメディアのサイトを作ったときに、ヘッダー(上についている画像)を変更する方法をお話します。

このサイトでも、時期に応じてヘッダーを変えたり、キャッチを入れたりみたいなことはしていますが、その方法についてチェックしていきます。

■まずは、ヘッダーの画像を作って用意しておく

管理人の場合は、イラレやinkscapeといったベクター系のソフトのほうが得意なので、そっちで行っています。パス曲げたりオブジェクト回転させたりみたいな動きがやりやすいから。フォトショップなどのほうが得意な場合はそちらでもokです。レイヤー機能があるものがベストです

で、人物・背景・フォントなど素材を用意して、画像ツール上でレイヤーごとに配置していって、ヘッダー画像をつくります。印象的なキャッチコピーを入れたい場合は、『キャッチの部分を、そのフレーズにあったフォントに変える』ということをしてもokです。

通常のブログでもあることですが、ワードプレスの場合でもテーマによっては『推奨ヘッダー画像サイズがあるもの(例:stinger5なら980×250px)』『ある程度横幅にあわせて調節してくれるもの』などがあるので、テーマがどういう風に動くのかも押さえておきます。

■ワードプレス・ヘッダー画像変え方2通り

さっそく、作った画像をつかってみましょう。まずは、さっき作ったヘッダー用の画像を、左メニューの『メディア→新規追加→画像をドラッグ&ドロップ(またはファイル選択)』と操作してアップロードしておきます。ここでアップロードするのは、以下の1番・2番どちらの方法でも使います。

■1:ワードプレス内の外観メニューから(普通のみんながやってるやり方)

通常は、横のメニューの『外観→ヘッダー』というふうに進んで、ヘッダーを変更する場合が多いと思います。

そのあとプレビューみたいな画面と、ヘッダー選択する部分が出るので、アップロードした画像を選択します。画像のトリミングもできるようですが、この機能は使ったことがありません。プレビューでヘッダーが表示されているのに『未設定』となっているのは、別の方法で表示しているからです。ここで設定した画像は・・・・

< ?php if(get_header_image()): ?>
    < p id="headimg"><img src="" alt="*" width="" height="" />

< ?php endif; ?>

header.php内の、上記のコードの部分から出力されます。この部分を移動してヘッダー画像位置を変えたりできますが、あまり使わないかも。

■2:header.phpに画像タグやスマホ/pc条件分岐タグを使う

ちょっとマニアックな方法になりますが、ワードプレス・テーマの編集の中にある『header.php(ここがヘッダーやh1説明部分を出力)』内に、imgタグ(画像アドレス指定)と、phpスマホ/pc条件分岐タグ書いてみました。条件分岐は昔使ったのがそのまま残っていたようです。だいたいh1の下あたりにあると思います(テーマによる)。

<?php if(!wp_is_mobile()) { ?>
<?php } ?>

というコードで『!wp_is_mobile』というようにびっくりマークがついているものは、『スマートフォン以外』という条件分岐です。ここに画像タグ入れることにより、スマホ以外での表示(例えば、pcやタブレットのみ表示)をやろうとしていました。スマホ回線だと、pngなどヘッダーのサイズが大きいときは、明らかにページ表示速度が落ちるからです。jpegで少し圧縮したものだと、そこまでページスピードのパフォーマンスは悪くなりません。

ちなみにheader.phpを直接エディットすることにより、条件分岐だったり、下にアドセンス表示したりみたいなことができるわけです。

■活用例(管理人の場合):ヘッダー画像変えでできること

このサイトの場合ですと、上記のようにキャッチを入れたヘッダー画像を時期に応じて入れ替えたりしています。人によってはヘッダーころころ変えないほうが言いということもあるかもしれません。

しかし、管理人が狙っているのは、『デパートのルミネ』みたいな戦略です。あれをブログに応用したらどうなるか。季節や、月ごとに刺さるコピーを考えられるか、という挑戦です。管理人自体がキャラ薄いので(笑)、忘れられないようにという願いもこめられています。

ぜひ皆さんも、ワードプレスサイトお使いの場合は、ヘッダーも工夫してみてください(やり方がわからない場合は管理人にご相談いただければ幸いです)。

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - webサイト制作 【タグ】 -

  関連記事

侍エンジニア塾ブログにあったPHPコードをシンプルに書いてみる(foreachで配列キーや値取得・continueで空要素スキップ)

今回は、(自分もまだプログラム学習中の身ですが)よくある『プログラム学習 …

【PHPでWPカスタマイズ】プラグイン不使用で、テーマに関連記事表示機能を実装しPV・滞在時間を上げる

今回は、サイトをしっかり見てもらうために、『WordPressサイトに、 …

PHP・shuffleやarrayを使った、画像ランダム表示方法~メインビジュアルやバナー・テキストにも利用可能

今回は、以前お取引先のスクールの担当者さまと、『サイトのメインビジュアル …

wordpress構成ファイルのxmlrpc.phpを無効化する方法【実は攻撃されやすい】

今回は、wordpressの構成ファイルで、ちょっとクセのある『xmlr …

【別に止めなくてOK】wordpressサイトなどに、アメブロ・fc2など無料ブログの更新情報を表示して連携する方法

今回は、『無料ブログにすべきかwordpressにすべきか』という疑問に …

【マテリアルデザインCSSフレームワーク】Materializeで、カッコいいビジネスサイト(静的HTML)を作る

今回は、フレームワークを使ったサイト制作を行ってみます。 利用するのは『 …

【wordpressカスタマイズ】llorix_oneなどビジネストップ1カラムテーマで、カスタマイザーで入らない動画・オーディオを入れる

今回は、人気の海外ディベロッパーのwordpressテーマで、動画やオー …

【WPカスタマイズ】子テーマさえ入れとけば大丈夫?なわけねーだろ!(親テーマに手を入れる・ファイルコピー適応させる羽目になる事例)

今回は、推奨されてるWPの子テーマについてですが、『結局親テーマいじる羽 …

【セキュリティ・脆弱性対策2018】wordpressでサイバー攻撃されやすいファイルってどんなのがあるの?

今回は、wordpress利用者にも気になる『サイバー攻撃』についてです …

ワードプレスでデータベースにたまる余計なデータって何があるの?事例と対処方法

今回は、ワードプレスのサイトでよくある『データベースにたまる余計なデータ …

【WPカスタムフィールドはこう使う】カップ焼きそばレビュー記事に、カスタムフィールドで評価スコアを(CSSつけ方もあり)

今回はwordpressの機能『カスタムフィールド』で、より具体的に利用 …

【PHPで条件分岐】wordpressのサイトで、ページごと(固定・記事・カテゴリ・複数ページ)に、表示される内容を変えたいっ!

今回は、wordpressのサイトで使われるPHPプログラムの条件分岐で …