STINGER

コピペでできる!STINGER PLUS2の記事一覧をカード型にするカスタマイズ

投稿日: 更新日: 2017年11月20日

WordPressテーマの中では以前からSTINGERシリーズを好んでいるでででーさん(@d3_dayo) です!

 
WordPressには無料でも素敵なテーマが数多くありますが、中でも私が好きなのはSTINGERシリーズ
 
STINGER5を使って以来、最新バージョンが登場すると思わずチェックしてしまいます。
 
ダウンロード及び規約
このカキタクナッタラには適用していないんですが、せっかく無料で使える最新バージョンのSTINGER PLUS2も登場しているので、サブのサーバーで有効化してみて、いろいろと弄りたおしてみることにしました。
 
この記事では、その弄りたおした結果の中から、このカキタクナッタラ同様に記事一覧をカード型で表示するカスタマイズを紹介したいと思います。
 
 

スポンサーリンク

完成図

下のサンプル画像のように「PCでは一行二列」「スマホでは一行一列」でカード型の記事を表示します。
 
・PCでの表示

 
・スマホでの表示

 
サイトのデモをみたい場合には、このカキタクナッタラで使っているカード型記事一覧と同じデザインなので、トップページにアクセスしてみてください!
 
 

カスタマイズの手順

さっそくカスタマイズの手順を紹介していきます。作業は基本的に指定箇所へのコードコピペ(及び書き換え)だけで完了するようになっています。
 
念のため事前にお伝えしますが、作業の前には元の状態へと戻せるようにバックアップをとっておくことをおすすめします。特に今回紹介する手順の中ではfunctions.phpを編集するため、ちょっとしたミスでもWordPressの画面が真っ白になってしまい、ログインすら出来なくなってしまうのでお気をつけください。
 
事前にWordPressをインストールしているサーバーのFTPが使える状態にしておくこと、編集に失敗して画面が真っ白になってしまっても戻せるようにfunctions.phpのバックアップをとることを強くオススメします!
 
WordPressファイルのバックアップは以下のプラグインがオススメです!

functions.phpにコードを追記する

さて、まず最初に一番慎重な作業をしなければいけないfunctions.phpの編集から作業していきます。
 
functions.phpへのアクセスは、WordPressの管理画面から外観→テーマの編集と選択していき、一覧の中にあるテーマのための関数 (functions.php)を開きます。
 
以下のコードをfunctions.phpの中に追記します。

上記のコードは記事一覧のアイキャッチ画像を16:9の比率にする前提での数値を入力しています。もし、アイキャッチ画像の比率を16:10にしたい場合は、コード内の「400, 225,」の部分を「400, 250,」へと書き換えた上で追記してください。
 
コードを貼る位置
貼る位置ですが、どこに貼ればいいかわからないという方向けに、とりあえず画面が真っ白にならない位置を念のためお伝えしておきます。
 
functions.phpを開いている状態で以下のコードを検索します。

Windowsの場合はCtrl+Fキーの同時押しで検索ができるので上記のコードを検索し、見つかったコードの下に追記すれば問題は起こらないと思います。
 
デリケートなfunctions.phpでの作業は以上となります。お疲れ様でした。
 

4つのPHPファイルを書き換える

以下の4つのPHPファイル内のコードを書き換えます(ファイルへのアクセスは外観→テーマの編集から)
 
・archive.php
・category.php
・home.php
・search.php

 
上記4つのPHPファイルに共通で記述されている以下のコードを…("contentInner"で検索すると見つけやすいかと思います)

このように書き換えます。

※ category.phpだけ元の記述が少し異なると思いますが、他3つのPHPファイルと同じように上記コードで書き換えます。
 

itiran-thumbnail-on.phpの編集

次にitiran-thumbnail-on.phpを編集していきます(ファイルへのアクセスは外観→テーマの編集から)
 
やること1
まずはPHPファイルの先頭にある以下のコードを…

このコードに書き換えます。

 
やること2
次に以下のコードをitiran-thumbnail-on.phpから検索し…("post_thumbnail"で検索すると見つけやすいかと思います)

このように書き換えます。

( 'thumbnail' )という部分を( '400_thumbnail' )に書き換えています。
 
やること3
続いてitiran-thumbnail-on.phpから以下のコードを検索し("smanone"で検索すると見つけやすいかと思います)

上記のコードはまるっと削除します。このコードを削除することで記事タイトル下の記事抜粋文がなくなります。
 
やること4
最後に再びitiran-thumbnail-on.phpから以下のコードを検索し("fa fa-tags"で検索すると見つけやすいかと思います)

このように書き換えます。

以上でitiran-thumbnail-on.phpは完了です。あとは最後に仕上げとしてCSSで見栄えを整えていきます。
 

CSSで見栄えを整える

最後にCSSで見栄えを整えます。基本的に以下のCSSをstyle.cssに貼り付けるだけでOKです。フォントの色・サイズ、その他細かい調整をしたい場合には、以下のコードをご自身で編集してください。

上記のコードにはアイキャッチ画像にマウスオーバーした際の画像拡大効果や、記事タイトルにマウスオーバーした際の文字色・一瞬だけテキストが拡大する効果なども含まれています。
 
 

おわりに

次の記事ではSTINGER PLUS2のヘッダーを画面幅いっぱいにするカスタマイズを紹介しています!(こちらもぜひ)

コードがズラッと並んでいるので、カスタマイズに不慣れな方だと上から下まで眺めただけで難しそうだと思ってしまうかもしれませんが、いざ真剣にカスタマイズをするつもりで操作しながら手順を確認していけば、基本的にコピペ作業だけなので決して難しくはないと思います!STINGER PLUS2を記事一覧にしてみたい方は、ぜひぜひチャレンジしてみてください。
 
 
以下の記事ではこれまでにブログで紹介したSTINGER PLUS2カスタマイズ記事をまとめています!今回の記事で紹介したカスタマイズ以外にもいろいろと弄れる部分はありますので、こちらもどうぞご覧ください!
 
【誰でも簡単】これまでに書いたSTINGER PLUS2のカスタマイズ記事まとめ | カキタクナッタラ

でででーさん

2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。

あなたにオススメ