メニュー 閉じる

フロントページのデザイン変更

PC画面の画像

Last Updated on

ダイナミックなフロントページに!

ワードプレス初心者でも扱いやすいテーマ Lightning ですが、最近主流になりつつあるフロントページのカスタマイズが完成されたテーマに比べると、若干トップページが寂しいですね。

私のサイト 53rd.net も、他のテーマに見習って少し見た目を整えてみました。

テーマを変えてしまう!という選択肢もあるのですが、もう少し Lightning に寄り添ってみたいと思います。

 

 

因みに私の運営する一部のサイトは、他のテーマを使用しています。

テーマ Hestia輪のこころ

テーマ MesmerizeRealcommunications(製作中)

こんな風にいまどきかつおしゃれな感じにしたいですね。

 

フロントページ構造

現在のフロントページの構造です。

固定ページの本文より上に『トップページコンテンツエリア上部』が来ますので、フロントページに設定した固定ページ(ここでは Home)の本文には現在何も書いていません。

フロントページに設定した固定ページの属性を『ランディングページ』に変えた場合は、その固定ページ( Home)にもウイジェットを置けるようになります。

※追記 カスタムHTMLによる最新記事見出しをやめ、LTG 全幅見出しを設定しました。

全幅見出しウイジェットの設定方法はこちら

 

■Lightning 現状の問題点

トップページコンテンツエリアを飾るウイジェットには、『VK_PR Blocks(丸い3つのアイコン部分)』と『VK_3PRエリア(四角い3つの画像部分)』が用意されていますが、どちらのウイジェットもなんだかこじんまりとしていてパッとしません。

さらに投稿記事を表示するウイジェット『LTG コンテンツエリア投稿リスト』も、画像が小さくダイナミックさに欠けます。

テーマ Lightning : ねころび

 

■目を引くコンテンツエリアの作成

テーマ Lightning はプラグイン VK All in One Expansion Unit と Lightning Advanced Unit によって、ガシャンガシャンと合体ロボのように仕上がっています。

ここにさらにページビルダー系のプラグインをガシャンと持ってくると、プラグイン同士の相性で不具合を起こしかねません。
なのでなるべくならプラグインを追加せずに何とかしたいものです。

ここは、最初から入れてあった Shortcodes Ultimate と functions.php を組み合わせて、見栄えの良さそうなコンテンツエリアを作ってみたいと思います。

最新記事をアイキャッチ画像ごと出力するショートコードも何点か試したのですが、いい感じのものが見つかりません(他力本願💦)でした。
また発見したらお知らせしますね。

 

1. Shortcodes Ultimate

Columns を使って2カラムにします。

詳しい使い方はまた別途紹介します。

 

2.  functions.php 

プラグインを使わず、固定ページや記事内に最新記事のリストを表示するショートコード用のプログラムを直接 functions.php に記述します。

詳しい使い方はまた別途紹介します。

 

■投稿ページ&ウイジェットの画像サイズ変更

3.  css のカスタマイズ

css をカスタマイズして『LTG コンテンツエリア投稿リスト』とブログページのサムネイル画像のサイズを変更します。

詳しい使い方はまた別途紹介します。

 

 

ハイ完成しました!

 

Before

53rd.net ビフォー

サイドバーがあるため記事欄が窮屈でした。
大きめのアイキャッチが存在しないことで、なんだかこじんまりとしたサイトに見えます。

After

53rd.net アフター

フロントページを「1カラム」にしたことにより「全幅見出しウイジェット」が使えるようになりました。

大きめの画像を多用したこととの相乗効果で、ダイナミックなページの完成です。

 

 

なんかちょっとだけおしゃれになりました( *´艸`)

 

詳しいカスタマイズ方法はまた後ほどアップいたしますね。

 

 

 

 

関連記事