書きたい記事を書きたいように書くFreeブログ

かきてぃーのプロフィールはこちらをクリック!

wordpressテーマ【Seal】で人気記事-Popular Postsをカード型にカスタマイズ

 
  2018/06/24
 
スポンサーリンク
スポンサーリンク
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら

ちょっと最近、暗い記事や自己啓発的なのが続いていたので、久しぶりにカスタマイズ系の記事を書きます。

今日は、wordpressの人気テーマ「Seal」のカスタマイズです。

実は、つい最近このテーマ購入したんですよ。

だって、見た目カッコいいしSEO的観点も良くて、何よりカッコいいので!(大事なことなので2回言いました。

で、テスト環境で動作確認中なんですがプラグイン「WordPress Popular Posts」のデザインがダサすぎたのでテーマの最新記事と同じようにカード型にしてみました。

参考になる記事もなかったので、同じようにお困りの方は真似してみて下さい!

カスタマイズしないとダサすぎる見た目

マジかよ。いくらなんでもダサすぎる。

これならプラグインを導入しない方がマシ。と考えてしまいます。

かきてぃー
ん~出来れば「最新記事」みたいに同じようなデザインにしたいなぁ~

と考えました。

そこで、コードを確認…。

うん。いけそうだね。

サメくん
えぇ!?どこがいけそうか全く分からないんだけど…
イルカさん
まあ、かきてぃーさんの真似をしてれば大丈夫だよ。
サメくん
お、おう。

完成系のイメージは「最新記事」と同じカード型です。

これを目指してカスタマイズしていきます。

HTML マークアップ設定を使って同じようなロジックにする

「WordPress Popular Posts」には既存の機能で「HTML マークアップ設定」というのがあります。

これは、通常のロジックを自由にカスタマイズできる機能です。

サメくん
ロジック?カスタマイズ?
かきてぃー
分かりやすく説明すると…
元々のデザイン

あいうえお

かきくけこ

さしすせそ

かきてぃー
元はあ行、か行、さ行しかないデザインだとします。

マークアップで「た行、な行」を追加して更に先頭だけ赤文字にする

マークアップ後のデザイン

いうえお

きくけこ

しすせそ

ちつてと

にぬねの

かきてぃー
こんな感じで元々のデザインを自由にいじれる機能なんだ
サメくん
なるほど!これで、カード型の真似をするんだね!
かきてぃー
そうだね。後は真似するだけでカード型になるようにするだけなんだ。
サメくん
どういうこと?

デザインはテーマ「Seal」が既にやってくれている

カード型のデザインは「最新記事」がなっているように、既にテーマ側の設定で終わっています。

後は、「人気記事も同じジャンルでデザインしてねー」とテーマ側に伝えて上げれば、何もせずにカード型になります。

ここで最新記事のロジックを確認します。

これが最新記事で使われているタグなどの構造になります。

大枠が「id=topnews」というdivタグで囲われており、各コンテンツは<dl><dt><dd>タグを使い構成されていますね。

これと全く同じように「WordPress Popular Posts」をマークアップします。

サメくん(改)
こんな感じにマークアップされるのかな?
イルカさん
ちょっと黙ってもらっていいかな。
サメくん(改)
すみません…。

「WordPress Popular Posts」を「Seal」の最新記事と同じにマークアップ

まずは、ウィジェットに「WordPress Popular Posts」を追加します。

各設定はお任せしますが、表示数は3の倍数が良いと思います。

というのも、「Seal」の最新記事が最大横3記事なので。

3の倍数が綺麗に表示されますよ。

重要なのがここから

アイキャッチ画像を表示」「閲覧数を表示」「カスタム HTML マークアップを使うにチェックを入れ保存を押下すると、設定出来るようになります。

設定は、「アイキャッチ画像」が幅348px、高さ183pxです。(Sealと同じ)

私は、カード型の日付の代わりに閲覧数を表示したいので、「閲覧数を表示」にしてますが、日付がお好みの方は「閲覧数を表示」のチェックを外して「日付を表示」にチェックを入れて下さい

マークアップは以下のようにカスタマイズします。

タイトルの前 / 後:
投稿の前 / 後:
投稿の HTML マークアップ:
日付の場合は…
となります。

かきてぃー
お気づきの方もいるかもしれませんが、アイコンを閲覧者っぽいアイコンに変えています。

10行目の「<i class=”fa …”>」ってところですね。

アイコンサイトから好きな画像に変えることも出来ます

アイコンサイト:Font Awesome Icons

このままではダメ!「style.css」で整えよう

ちなみにこのままでは、綺麗に表示されません。恐らくカテゴリの所が隠れたりしているかな?

なぜかというと、「WordPress Popular Posts」のカテゴリはリンク付で出力されます。

「Seal」のカテゴリはリンクなしで出力されているため、cssが適応してくれないんですね。

これを解決する為にcssをカスタマイズしてリンク付でも同じようなデザインにします

以下を子テーマの「style.css」にコピペして下さい。

ちょっと長いのは、レスポンシブ(スマホ表示)でも綺麗に表示するためです。

スポンサーリンク


「Seal」人気記事の完成系がこれだ!

かきてぃー
やっふぅううううううううううううう!!綺麗に表示されたぜぇ!!

スマホも綺麗に表示されているので、OKですね!

 

 

かきてぃー
いかがでしたでしょうか。以外と簡単に綺麗に出来たのではないでしょうか。

 

かきてぃー
次回は「カテゴリの色をカテゴリ毎に分けるカスタマイズ」でもご紹介しようと考えています!

 

サメくん
かなり苦戦しました…。
イルカさん
サメ君…いつ出来るようになるんだ。。

 

 

かきてぃー
では、また次回!おさらばえ!
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら
スポンサーリンク











コメントはこちらです

Copyright© 書きタレ , 2013 ~ 2018 All Rights Reserved.