ヘッダー画像を表示させたい
ヘッダー画像を導入してほしいとのお声を頂戴したので、インターネットの情報を参考に導入を試みてみました。ヘッダー画像の設定方法をインターネットで検索したら、たくさんの記事が出てきたのですが、記事の通りに出来ませんでした。多くのページでの説明ではカスタムヘッダー機能というものを使ってヘッダー画像を設定できるようなのですが、私の環境にはその機能がなかったのです。始めに直接ソースコードを編集して、カスタムヘッダー機能を追加する必要がありました。
手順
WordPressにカスタムヘッダー機能を導入
//カスタムヘッダー
add_theme_support('custom-header');上記コードを、｢ダッシュボード｣➡️｢外観｣➡️｢テーマ編集エディター｣➡️｢テーマファイル(function.php)｣の中に追記します。追記する場所を私は末尾にしました。
ヘッダーを表示させるための設定
<!-- custom header -->
<?php $header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<div id="header_img">
<a href="<?php echo home_url(); ?>"><img src="<?php header_image(); ?>" alt="<?php bloginfo('name'); ?>" /></a>
</div>
<?php endif;?>上記コードを、｢ダッシュボード｣➡️｢外観｣➡️｢テーマ編集エディター｣➡️｢テーマファイル(header.php)｣のbodyタグ内に追記します。ファイル内の追記する位置によってヘッダー画像が表示される位置が変わります。私は何度か微調整しました。
ヘッダー画像のアップロード
「コーヒーとブログ」というサイト名なのでコーヒーが登場しないといけないという安直な考えで、コーヒーの画像にしました。｢ダッシュボード｣➡️｢外観｣➡️｢ヘッダー｣と進み、用意した画像をアップロードします。
なんとかヘッダー画像をサイトに表示できましたが。
出来たヘッダー画像ですが、なんかデカすぎる気が。この作業は苦労しました。直接ソースコードを変更しなければならず、何度か失敗を重ねた末、ヘッダー画像を表示することができました。でも苦労したことを通して、
WordPressの理解が進んだので、良かったです。
今回のようなソースコードを編集しなければいけない場合、取り返しのつかない失敗をしても元に戻せるように、バックアップのやり方を勉強しないといけない、と思いました。テーマによってはヘッダー画像を追加する機能を始めから持つものもあるそうで、テーマの仕組み、function.phpやheader.phpの役割について、もう少し理解する必要もありそうです。
また、今回ヘッダー画像を人の助言で何となく導入し、サイト全体のデザインは考えられていませんでした。サイトのデザインについてちゃんと勉強したいな、と思います。
コメント