読者です 読者をやめる 読者になる 読者になる

DIY家族と英語家族

diyと英語を楽しんでいる家族のまとめ

サイトのトップページを簡単で自由にレイアウトプラグイン!wordpressカスタマイズ

スポンサーリンク

f:id:buchibuchi4647:20170317053657j:plain

(備忘録)別サイトでwordpressのsimplicityを使っています。オシャレなブログやサイトを見るとトップページがかっこいいなと本当に思います。まねをするにもテーマが有料なんだろうなと思っていました。

 

しかし、トップページを簡単に自分の好きなようにレイアウトできるプラグインを発見しました。その設定方法と使い方を自分の備忘録として残しておきます。

page builder by siteorigin

page builder siteoriginというプラグインを使えば簡単にトップページをカスタマイズできます。使い方はあなた次第でサロン系のウェブサイトやショップサイトもこれを導入すれば可能です。

wordpressプラグイン→新規追加→page builder by siteorigin を追加する。

f:id:buchibuchi4647:20170317053744p:plain

 

その後有効化したら、固定ページ→新規追加で固定ページを新規追加する。

 

f:id:buchibuchi4647:20170317053804p:plain

新規固定ページの右上にページビルダーが追加されてますね。ここをクリックします。

 

1の列の追加をクリックします。すると、

f:id:buchibuchi4647:20170317053825p:plain

 

レイアウトをどんなかんじに分けますか?ってことです。ここでは2ですので半分の2分割に分けています。3なら3分割にわけることができます。きまったら右下の挿入をクリックする。

2.ウジェットを追加をクリックする。

先ほどの設定画面に戻りますのでウジェットの追加をおしてクリックしてください。結果、すろといろい選べますので今回は僕のブログと同じにするならテキストウジェットを選ぶ。

f:id:buchibuchi4647:20170317053856p:plain

 

列にテキストが追加されました。そのあと編集をクリックします。

 

f:id:buchibuchi4647:20170317053924p:plain

好みですが僕はタイトルには何も書いていません。内容欄に僕の場合ですとトップページにカテゴリー一覧表を作りたいと思いましたので、そのphpコードを記入しています。内容欄にphpコードを直接書き込むことはできないのでプラグインphp text wedgetをインストールして有効化します。有効化するだけで設定完了となります。もし僕のカテゴリーリスト一覧表を参考に作っていただけるのであれば以下をご覧下さい。

 

 

diy-english.hatenablog.com

 

 

ここらはカテゴリー僕の設定のみ適応の話ですが

1.ウィジェットclassにpostbox1と書き込む。書き込まないとcssのカスタマイズが上手くできません。

2.カテゴリー一覧のそれぞれのウジェットの背景色を変更できる。

以上がトップページの自由にレイアウトするプラグインpage builder by siteoriginの設定方法です。お疲れさまでした。