このサイトではなく、現在構築中の映画情報サイトの方のカスタマイズ録をメモ記事にしています。
この記事でヘッダー廻りのミッション?はおしまいです。
サイトタイトルを中心にした際に、「折角のセンタリングだからここに何か入れても面白いかも」と、
ヘッダー部分にテキストを入れて遊んで?いました。
 |
それで、思いついたのが、前回書いた記事の様に、
「ヘッダーのキャッチフレーズ下に記事タイトルを表示する」って事でした。
折角?なので、カテゴリーアーカイブページを開いている時に
ヘッダー部分に現在閲覧しているカテゴリー名(カテゴリースラッグ)を表示する仕様にし、
ついでにタグアーカイブページを開いている時は、タグ名(タグスラッグ)も表示してみました。
何故、ヘッダーに記事タイトルやカテゴリー名を表示する必要があるのか?
※このくだりは前回の記事と被ります😓※
このサイトでは、ページ毎に表示されているタイトルやパン屑リストで満足しているのですが、
映画情報サイトでは、トップページの記事一覧の前と、
単一記事の前あたりに色々と埋め込みたいと考えているのです。
DEMOサイトと映画情報サイトではちょこっと変更して、現在こんな感じになっています。 |
この状態を以下の画像の様にする予定。 |
この変更は元に戻しました。何故なら・・・  Simplicity2.0.8で 「投稿パンくずリスト上」と「投稿タイトル上」にウィジェットエリアが追加されたのです👏 |
「投稿パンくずリスト上」と「投稿タイトル上」にウィジェットエリアが追加された事で、
私が思っていた様な事が実現可能に。
この新しいウィジェットエリアに広告を配置したり、
サイトのトピック的なものをスライダーを使って表現したりすると、
その分スペースを取るので、ブラウザー内に、記事タイトルまで収まらなかったりします。
ヘッダーに案内的な表示があれば分かりやすいのではないか。と考えたのです。
ヘッダーのキャッチフレーズ下にタグ名(タグスラッグ)を表示する方法
目的は、以下のように表示する事です。
(DEMOサイトに一時的に実装してますが外すかも?知れないので、画像貼っておきます) |
上記画像の状態から以下画像のようにした。 |
・・・因みに以下は前回の記事で表示させた記事タイトル。 要するに同じ部分に表示するって事デス。 |
📋 この作業に必要なファイル
- 親テーマのheader.php。子テーマに複製し、【Simplicity child2 (header.php)】を編集。
- Simplicity2の子テーマのスタイルシート【Simplicity child2 (style.css)】
文字色と大きさを変更したい場合のみ編集。(既に書いている場合は不要。)
親テーマのheader.phpを複製する。
Simplicityの親テーマにあるheader.phpを子テーマに複製(コピー)して下さい。
子テーマへheader.phpの入れ方は、前記事のこの辺りをご閲覧下さい。
ロリポップユーザーの方でも、ロリポップFTPで簡単にできます。
子テーマに入れたファイルを、子テーマ内で変更する。という事になります。
親テーマのファイルを書き換えずにカスタマイズする事になりますので、
親テーマがバージョンアップしても、変更したファイルを書き換える必要がなくなります。
詳しい基本的な事は、子テーマに無いファイルを親テーマから複製する。に記しています。
Simplicity2の子テーマのheader.phpを編集する
テーマの編集から、子テーマのheader.phpを開いたら、</div><!– /#h-top –>を探します。
ブラウザーの検索窓でサーチすると良いでしょう。
この記事↓で画像貼っています。同じ位置です。
ヘッダー部分に現在閲覧しているカテゴリー名を表示する—Simplicity2カスタマイズ中—
<?php get_template_part(‘sns-pages’); //SNSフォローボタンの呼び出し?><?php endif; ?></div>の下で、
</div><!– /#h-top –>の直ぐ上に記事タイトルを表示させる為のコードを書きます。
書きにくかったら改行スペースを空けても良いです。
以下の様に書き足します。
| <h4 class=”topArea”> <?php if ( is_tag() ) : ?> <?php single_tag_title(); ?> <?php endif; ?> </h4> |
さらっと解説⏩
参考までに・・・。
<h4>タグにクラス名”topArea”と付ける。
(クラス名はそれらしいのであれば何でも可)
<?php if ( is_tag() ) : ?>⇓
投稿ページが表示されている場合どうするか。PHP構文if。
<?php single_tag_title(); ?>⇒タグタイトルを呼び出す。
<?php endif; ?>⇒PHP構文if閉じ。
</h4>⇒タグ閉じ。
<?php if ( is_tag() ) : ?>
<?php single_tag_title(); ?>
<?php endif; ?>カテゴリーアーカイブページのみで表示させるので”is_tag()”を
出力はカテゴリー名の呼び出しなんで、”single_tag_title()”を使用しました。
- 因みに<h4>タグもお好みで変更して下さい。(<h1>以外、<h2>～<h6>まで。)
- 「ヘッダーのキャッチフレーズ下に記事タイトルを表示した」方や
「ヘッダー部分に現在閲覧しているカテゴリー名を表示した」という方は、
<h4 class=”topArea”></h4>は被るので必要ないです。省いて下さい。
もう少し変化??を持たせたい場合は、アナウンステキストを書き入れて、
Font Awesome絵文字アイコンなんてのを入れてみてはどうでしょう。
tag_title()の括弧内に ‘（シングルクォート）で括り表示させたい事を書きます。
<?php if ( is_tag() ) : ?>
<?php single_tag_title('只今ご覧のタグメニュー <i class="fa fa-tags"></i> *'); ?>
<?php endif; ?>デモサイトでノーマルな表示なんで、このサイトで暫く表示しておこうと思ったんですが・・・
このサイトでは今の所100％?必要ないので😮以下のキャプチャー画像でご勘弁下さい😅
こんな風になります。「WordPress」カテゴリーにアクセスした。 |
因みにこのサイトは2016/02/19現在、Simplicityの1系(ver*1.9.3tの最終?安定版)なので、
Simplicity1系でも同じ様に変更が可能って事です。
Simplicity2の子テーマのスタイルシート、style.cssを編集する
(文字色と大きさを変更したい場合のみ。前回書いている場合は不要。)
この表示のフォントカラー等々を変更したい場合は、
スタイルシートに以下の様に書きます。
Simplicity2 child: スタイルシート (style.css)で変更内容を指定。
| .topArea {color: #2098a8;font-size: 14px;font-variant: normal;} |
.topArea {
color: #2098a8;
font-size: 14px;
font-variant: normal;
}文字(フォント)の色や大きさはお好みで調整します。
尚、センタリングを行ってない(左寄り、デフォルト表示)場合は、
マージンプロパティを使って左からの領域スペースをつくってやります。
(キャッチフレーズに添った指定にすれば見栄えは良いかも。)
| .topArea {color: #2098a8;font-size: 14px;font-variant: normal;margin-left: 30px; padding: 0;} |
.topArea {
color: #2098a8;
font-size: 14px;
font-variant: normal;
margin-left: 30px;
padding: 0;
}因みに映画情報サイトでは背景が黒っぽいので以下の様に白指定。
.topArea {
color: #ffffff;
font-size:14px;
font-weight:normal;
}
以上です。
記事タイトルだけではなく、IF文(条件分岐)を使うと、トップページ表示の場合にも
案内を表示する事ができます😞
という事で、ついでにトップページを表示した時のアナウンスも書いておきます。
ヘッダーのキャッチフレーズ下にトップページのアナウンス等を表示する方法
Simplicity2の子テーマのheader.phpに以下を。(記事・カテゴリー・タグと同じ位置)
| <?php if ( is_home() || is_front_page() ) : ?> トップページです。 <?php endif; ?> |
<?php if ( is_home() || is_front_page() ) : ?> トップページです。 <?php endif; ?>
文言は何でも良いと思いますし、
トップページだけ何かしら(インフォメーションバナーとか?)入れたりするのも良いかもです。
ご閲覧ありがとうございます。お粗末でした😑
ヘッダー廻りのカスタマイズ関連記事
コメント