賢威ヘッダーのタイトル画像とテキストを入れ替える方法

この記事は約6分で読めます。

  • LINEで送る

賢威ヘッダーのタイトル画像とテキストの入れ替え

賢威のヘッダータイトルは画像かテキストをテンプレート生成時に選択できます。
しかし、サイト作成後に画像とテキストを入れ替えたい場合があります。

ヘッダーのタイトル画像と文字の入れ替え方法を説明します。

画像をテキストに入れ替える

画像時とテキスト時のヘッダーHTMLとPHPソースを比較します。

画像


<!--▼ヘッダー-->
<div id="header">
<div id="header-in">

<div id="header-title">
<p class="header-logo"><a href="http://www.xxx.com"><img src="http://www.xxx.com/wp-content/themes/keni61_wp_corp_140105/images/logo.jpg" alt="タイトル" /></a></p>


<h1>h1テキスト</h1>
</div>

<div id="header-text">
<p>説明文説明文説明文説明文説明文説明文</p>
</div>

</div>
</div>
<!--▲ヘッダー-->

テキスト

<!--▼ヘッダー-->
<div id="header">
<div id="header-in">

<div id="header-title">
<p class="header-logo"><a href="http://www.xxx.com">タイトル</a></p>


<h1>h1テキスト</h1>
</div>

<div id="header-text">
<p>説明文説明文説明文説明文説明文説明文</p>
</div>

</div>
</div>
<!--▲ヘッダー-->

HTMLを見比べてみると、6行目がタイトル画像かタイトルテキストの違いしかありません。

PHPも比較します。
「外観 > テーマ編集」から「header.php」を開きます。

画像

<!--▼ヘッダー-->
<div id="header">
<div id="header-in">

<div id="header-title">
<p class="header-logo"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" alt="<?php title_keni(); ?>" /></a></p>


<h1><?php h1_keni(); ?></h1>
</div>

<div id="header-text">
<p><?php echo the_excerpt_keni(); ?></p>
</div>

</div>
</div>
<!--▲ヘッダー-->

テキスト

<!--▼ヘッダー-->
<div id="header">
<div id="header-in">

<div id="header-title">
<p class="header-logo"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></p>


<h1><?php h1_keni(); ?></h1>
</div>

<div id="header-text">
<p><?php echo the_excerpt_keni(); ?></p>
</div>

</div>
</div>
<!--▲ヘッダー-->

PHPソースも6行目のみ違います。
タイトル画像とテキストを入れ替える場合は、「header.php」の上記部分を書き換えれば完了です。

テキストから画像に入れ替える場合は、
テーマフォルダ以下の「images」フォルダに画像を格納してください。

「images」フォルダに画像を格納する場合は、FTP接続でサーバーのテーマフォルダに接続する必要があります。
方法がわからない場合は、以下の通り画像をWordPress管理画面からアップロードして適用してください。

WordPress管理画面から画像をアップロードしタイトル画像にする

賢威ヘッダーのタイトル画像とテキストの入れ替え

賢威ヘッダーのタイトル画像とテキストの入れ替え

メディアノアップロード画面が開きますので、ドラッグアンドドロップか
「ファイルを選択」ボタンから画像をアップロードします。

賢威ヘッダーのタイトル画像とテキストの入れ替え

アップロードが完了するとメディアノアップロード画面に「編集」リンクが表示されるのでクリックします。

賢威ヘッダーのタイトル画像とテキストの入れ替え

アップロードした画像の編集画面に移動し、右サイドの「保存」から、
画像赤枠部分の「ファイルのURL」をコピーします。

このURLを使い、上記で説明したPHPの6行目を以下の通り変更します。

<p class="header-logo"><a href="<?php bloginfo('url'); ?>"><img src="コピーしたURL" alt="<?php title_keni(); ?>" /></a></p>

これで、後からでもヘッダータイトルの画像・テキストを入れ替えることが可能になります。

  • LINEで送る

コメントを残す

このページの先頭へ