ヘッダー部分に現在閲覧しているカテゴリー名を表示する—Simplicity2カスタマイズ中—

このサイトではなく、現在構築中の映画情報サイトの方のカスタマイズ録をメモ記事にしています。

サイトタイトルを中心にした際に、「折角のセンタリングだからここに何か入れても面白いかも」と、
ヘッダー部分にテキストを入れて遊んで?いました。

それで、思いついたのが、前回書いた記事の様に、
「ヘッダーのキャッチフレーズ下に記事タイトルを表示する」って事でした。

折角?なので、カテゴリーアーカイブページを開いている時に
ヘッダー部分に現在閲覧しているカテゴリー名(カテゴリースラッグ)を表示する仕様にしてみました。

何故、ヘッダーに記事タイトルやカテゴリー名を表示する必要があるのか?

※このくだりは前回の記事と被ります😓※

このサイトでは、ページ毎に表示されているタイトルやパン屑リストで満足しているのですが、
映画情報サイトでは、トップページの記事一覧の前と、
単一記事の前あたりに色々と埋め込みたいと考えているのです。

Simplicityの標準だと、構図的にはこんな感じですよね。

DEMOサイトと映画情報サイトでは変更して、現在こんな感じになっています。

この状態を以下の画像の様にする予定。 ・トップページの変更予定(ヘッダーの下にウィジェットエリアを設ける)

・単一の記事表示での変更予定(ボディの上部にウィジェットエリアを設ける)

例えば画像の様に、ヘッダーとボディの間にウィジェットエリアを設けて、広告を配置したり、
サイトのトピック的なものをスライダーを使って表現したりすると、
その分スペースを取るので、ブラウザー内に、記事タイトルまで収まらなかったりします。

こうした場合、ヘッダーに案内的な表示があれば分かりやすいのではないか。と考えているのです。

ヘッダーのキャッチフレーズ下にカテゴリー名(カテゴリースラッグ)を表示する方法

目的は、以下のように表示する事です。

(DEMOサイトに一時的に実装してますが外すかも?知れないので、画像貼っておきます)

上記画像の状態から以下画像のようにした。

・・・因みに以下は前回の記事で表示させた記事タイトル。要するに同じ部分に表示するって事デス。

📋 この作業に必要なファイル

1. 親テーマのheader.php。子テーマに複製し、【Simplicity child2 (header.php)】を編集。
2. Simplicity2の子テーマのスタイルシート【Simplicity child2 (style.css)】
   文字色と大きさを変更したい場合のみ編集。(既に書いている場合は不要。)

親テーマのheader.phpを複製する。

Simplicityの親テーマにあるheader.phpを子テーマに複製(コピー)して下さい。
子テーマへheader.phpの入れ方は、前記事のこの辺りをご閲覧下さい。

ロリポップユーザーの方でも、ロリポップFTPで簡単にできます。

子テーマに入れたファイルを、子テーマ内で変更する。という事になります。
親テーマのファイルを書き換えずにカスタマイズする事になりますので、
親テーマがバージョンアップしても、変更したファイルを書き換える必要がなくなります。

詳しい基本的な事は、子テーマに無いファイルを親テーマから複製する。に記しています。

Simplicity2の子テーマのheader.phpを編集する

テーマの編集から、子テーマのheader.phpを開いたら、</div><!– /#h-top –>を探します。
ブラウザーの検索窓でサーチすると良いでしょう。

<?php get_template_part(‘sns-pages’); //SNSフォローボタンの呼び出し?><?php endif; ?></div>の下で、
</div><!– /#h-top –>の直ぐ上に記事タイトルを表示させる為のコードを書きます。
書きにくかったら改行スペースを空けても良いです。

以下の様に書き足します。

<h4 class="topArea">
<?php if ( is_category() ) : ?>
      <?php single_cat_title(); ?>
<?php endif; ?>
    </h4>

カテゴリーアーカイブページのみで表示させるので”is_category()”を
出力はカテゴリー名の呼び出しなんで、”single_cat_title()”を使用しました。

• 因みに<h4>タグもお好みで変更して下さい。(<h1>以外、<h2>～<h6>まで。)
• 前回、「ヘッダーのキャッチフレーズ下に記事タイトルを表示した」という方は、
  <h4 class=”topArea”></h4>は被るので必要ないです。省いて下さい。

もう少し変化??を持たせたい場合は、アナウンステキストを書き入れて、
Font Awesome絵文字アイコンなんてのを入れてみてはどうでしょう。
cat_title()の括弧内に ‘（シングルクォート）で括り表示させたい事を書きます。

<h4 class="topArea">
<?php if ( is_category() ) : ?>
 <?php single_cat_title('只今ご覧のカテゴリーメニュー　<i class="fa fa-folder"></i>　*'); ?>
<?php endif; ?>
 </h4>

デモサイトでノーマルな表示なんで、このサイトで暫く表示しておこうと思ったんですが・・・
このサイトでは今の所100％?必要ないので😮以下のキャプチャー画像でご勘弁下さい😅

こんな風になります。「WordPress」カテゴリーにアクセスした。

因みにこのサイトは、Simplicityの1系(ver*1.9.3tの最終?安定版)なので、
Simplicity1系でも同じ様に変更が可能って事です。
2016/04/22追記・おそーい追記ですが、このサイトは2系にシフトしていますから、2系でも同じ様に変更が可能って事です。

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;
  margin-left: 30px; 
  padding: 0;
}

因みに映画情報サイトでは背景が黒っぽいので以下の様に白指定。

.topArea {
   color: #ffffff;
   font-size:14px;
   font-weight:normal;
}

以上です。

記事タイトルだけではなく、IF文(条件分岐)を使うと、トップページやタグ一覧表示の場合にも
案内を表示する事ができます😞

ご閲覧ありがとうございます。お粗末でした😑

サイトタイトルを中心にしフォローボタンを表示し文字サイズも変更—Simplicity2をカスタマイズ中

Simplicity2をカスタマイズ中。サイトタイトルを中心にしてフォローボタンを表示。サイトタイトルの文字サイズも変更。サイトタイトル文字サイズ指定の保持—見出しタグh1に依存させない方法。

mitemita.com

2016.02.04

グローバルナビメニューの位置をスクロールでヘッダー最上部に固定—Simplicity2をカスタマイズ中—

グローバルナビメニューの位置をスクロールでヘッダー最上部に固定する方法。jQuery必要なしで簡単に。前回に引き続き、ヘッダー廻りのカスタマイズの備忘録でございます。https://mitemita.com/simplicity2-customize1/今回は、グローバルナビメニューの位置をスクロールでヘッター上部に固定する方法です。jQueryは必要なしで、3つのファイルの編集のみで簡単に実装出来ます。

mitemita.com

2016.02.09

トップ(ヘッダー)のフォローボタンの位置替え!フォローボタンをサイドバーに移動—Simplicity2カスタマイズ中—

グローバルナビメニューの位置をスクロールでヘッダー最上部に固定した為、グローバルナビメニューでフォローボタンを隠してしまうので、シェアボタンの表示を移動する事にしました。フォローボタンをサイドバーに移動する方法

mitemita.com

2016.02.11

ヘッダーのキャッチフレーズ下に記事タイトルを表示する—Simplicity2カスタマイズ中—

0.1 何故、ヘッダーに記事タイトルを表示する必要があるのか? 1 ヘッダーのキャッチフレーズ下に記事タイトルを表示する方法 1.1 親テーマのheader.phpを複製する。 1.2 Simplicity2の子テーマのheader.phpを編集する 1.3 Simplicity2の子テーマのスタイルシート、style.cssを編集する (文字色と大きさを変更したい場合のみ)

mitemita.com

2016.02.12