SWELLの記事タイトル上にカテゴリー名を重ねる

SWELLにはswell_before_post_headというフックが用意されています。このフックで投稿ページの記事タイトル上にコードを挿入することができます。今回はタイトルにカテゴリー名(スラッグ)を重ねるカスタムを紹介します。

スマホはサイズ的に表示すると邪魔にしかならないので対象外です。

目次

記事タイトル上にカテゴリー名を重ねるコード

子テーマを利用します。外観テーマファイルエディターSWELL CHILDに各コードをコピペしてください。

function.phpを編集する前に必ずバックアップを取ってください。

STEP
function.phpにコードを貼り付ける

SWELL CHILDfunction.phpに以下のコードを貼り付けて下さい。特に理由がなければ一番下に貼り付ければOKです。

function add_catname(){
	$category = get_the_category();
	$slug = strtoupper($category[0]->category_nicename);
	echo '
	    <div class="before-post-head">' .$slug. '</div>
	';
}
add_action('swell_before_post_head','add_catname');
  1. get_the_category()で表示されたページがどのカテゴリーに属しているか取得しています。1つの記事に対してカテゴリーは複数設定できるので$categoryは配列になります。複数のカテゴリーを設定している場合、全て表示すると長いので$category[0]で配列の先頭の値を拾っています。
  2. strtoupper関数でスラッグを大文字に変換しています。
  3. echo ‘ ‘で文字列を出力し、変数$slug.(ピリオド)で連結しています。これで<div>タグに囲まれたカテゴリー名が出力されます。
  4. アクションフックでフック名swell_before_post_headと実行する関数add_catnameを指定すれば完成です。
STEP
CSSコードを貼り付ける

貼り付ける場所は管理しやすいところで構いません。

  • SWELL CHILDstyle.css
  • カスタマイザーの追加CSS
/*///タイトル上カテゴリー名///*/
.before-post-head {
    display: none;
}
@media (min-width: 960px){
    .before-post-head {
        display: block;
        position: absolute;
        top: 112px;
        right: 373px;
        line-height: 0.69;
        font-size: 6em;
        font-weight: bold;
        font-style: italic;
        color: rgba(233,236,238,.4);
        border-bottom: 2px solid;
        animation: rotate-in-to-left 2s cubic-bezier(.75,.01,.3,1);
        animation-fill-mode: both;
    }
    @keyframes rotate-in-to-left {
        from {
            opacity: 0;
            transform: translateX(-500px) rotatex(0deg);
        }
        to {
            opacity: 1;
            transform: translateX(0px) rotateX(360deg);
        }
    }
}
/*///タイトル調整///*/
@media (min-width: 960px){
    .p-articleHead{
        height: 116px;
    }
    .c-postTitle {
        align-items: flex-end;
        border-bottom: 2px solid #000;
        /* color: #fff;
        text-shadow: 2px 2px 0 var(--swl-color_shadow); */
    }
    .c-postTitle__ttl {
        /* font-size: 32px; */
        animation: rotate-in-to-right 1.5s cubic-bezier(.75,.01,.3,1) .3s;
        animation-fill-mode: both;
    }
    @keyframes rotate-in-to-right {
        from {
            opacity: 0;
            transform: translateX(1000px) rotatex(0deg);
        }
        to {
            opacity: 1;
            transform: translateX(0px) rotateX(360deg);
        }
    }
}

1行目~3行目で一度非表示にし、PCサイズ以上で表示するようにしています。タブレットでも表示したい場合は以降のメディアクエリ@media (min-width: 960px)600pxに変更してください。

コメントアウトはタイトルのフォント調整用です。フォントを調整する場合はアンコメントして数値をいじってください。不要なら削除推奨です。

アニメーションはおまけです。不要なら削除してください。

デフォルトフォントでは迫力にかけます。外部フォントおすすめです。

蛇足

紹介したコードはタブレットでの表示/非表示がカスタムしやすいようにしてあります。PCのみで表示するなら

  • モバイル端末かどうかで条件分岐させ、モバイルならadd_catname()を実行しない
  • CSS1~3行目を削除

の方がスマートのような気がするのでこのブログではそうしています。ファーストビュー周りなので少しでも軽くするための施策ですが、dispaly:none;の挙動をちゃんと理解していないので正しいか否かはわかりません。

  • アップデート頻度…文句なし。機能も順調に拡張し続けている。不具合対応も早い。
  • サポート…フォーラム形式で活発。開発者と回答者がフォーラムのいい雰囲気を作っている。
  • ライセンス数…制限なし。好きなだけブログを量産できる。
  • ブロックエディタ対応…完全対応。記事執筆が超快適。
  • 機能性…他テーマと比較してもトップクラス。比較記事はこちら
  • デザイン性…基調はシンプルですが、カスタムする環境は整っています。色々な方向性でデザインすることが可能。
  • 価格…17,600円(税込み)

\ ブログ運営が楽しくなる/

よかったらシェアしてね!
  • URLをコピーしました!
目次