池袋のブロガー理容師三浦正弘です！
今回、サイトを少々リニューアルしました！
しかしながら、僕はCSSだのHTMLだのという知識はなく
しかも思いつきで調べたりするので何をどうカスタマイズしたのか
忘れることがあります笑
なので、僕が思い出せるように今回行ったカスタマイズを
書きます！
思い出しながら書くので忘れてたらすいません。笑
個人？サロンHP？っぽくしたい！
まず、どういうページにしていきたいのか？
wordpressを構築していく上でとても大切ですよね。
テーマそのままでも充分ですが、
僕はオリジナルに作っていきたい！
人と違うブログにしたい！
という欲が強かったです笑
”サロンぽくお洒落に”
そこで今回やりたかったことは、
- トップページをHPっぽくしたい
- 新着記事はスライダーで表示したい
- Instagramからスタイルをアップして自動でトップページに表示したい
- ブログ用のページカテゴリー別で新着記事を表示したい
このくらいかな〜
（思い出したら追加します）
トップページをHPっぽくするためにしたこと
使用したプラグイン『page builder by SiteOrigin』
このプラグインは他の固定ページでも使ってますがページのカスタマイズが簡単にできてオススメです。
それでですね。
普通のトップページというと、ヘッダーがあって新着記事があってサイドバーがある。
感じですよね。
このブログってサロンぽく作りたいので従来のブログサイトっぽくはしたくないんです。
そこで、まずはトップページに持ってくるページとして”固定ページ”を作成します。
その固定ページを『page builder by siteorigin』で構築していきます。
構築のやり方は自由でいいと思います
ここでは省きますね。
作成した固定ページをフロントページに持ってくる。
【設定】→【表示設定】→【フロントページの表示】
まで進み固定ページを選択します。
するとフロントページにどの固定ページを持ってくるのかという選択欄が出てくるので、先程作成したページを選択しましょう！
最後に［変更を保存］で保存します。
新着記事をスライダー表示するためにしたこと
使用したプラグイン『shortcode Ultimate』
僕は今回のリニューアルで初めて知りましたが、定番のプラグインみたいですね。
ブログ立ち上げ当初から『Meta Slider』で画像スライドショーをつけてましたがこのプラグインでは”新着記事”までスライド表示できません。
どうしたものかと、調べてると『jQuery』という選択肢が出てきました。
？？？？？
僕の頭の中はパニックです。
javascriptをより簡単に構築できるみただし、jQueryを導入したサイトを見ると魅力的すぎて感動はしました。
しかし！タグやコード関係は知識のない僕にとってはヒールを履いて山登りするくらいハードなものでした。
1週間PCとお友達になれればできそうですが、あいにくそんなに仕事暇じゃないのでね(^_^;)
諦めるしかないのか・・・と思ってさらに調べてると『shortcode Ultimate』に出会いました。
しかもはじめこのプラグインは後に書く”固定ページにカテゴリー別で新着記事を表示させる”ために見つけその中から見つけることができました！
ではやり方の説明をします。
まず適当に新着記事を作成します。
『shortcode Ultimate』を有効化しておくと記事上部に［ショートコードを挿入］という表示があるのでそこからスライダーを選択し、ソースで［最近の投稿］、リンクで［投稿パーマリンク］を選択その他はお好きに調整してください。
そして［ショートコードを挿入］します。
挿入されたショートコードをコピーします。
フロントページ用の固定ページを開きます。
『page builder by SiteOrigin』で構築しているので任意のところに［テキスト］ウィジェットを挿入してその中にさっきコピーしたコードを貼り付けます。
これでフロントページに新着記事のスライダーを挿入できました！
ちょっと遠回りですがpage builder by SiteOriginで作ったページではすべてウィジェットになるので、別記事でショートコードを作りました。
Instagramから最新投稿を表示するためにしたこと
いろいろなサロンページや美容師さんの個人ページを見てると最新ヘアスタイルがお洒落に流れてきます。
カッコいいですよね！
でも、いちいちwordpressのメディアにアップするのも面倒くさい（ただの面倒くさがりです笑）
そうだInstagramがある！
Instagramなら気軽にアップできるので面倒な僕にも出来そう！
あとはInstagramの投稿を自動に表示できるようにするだけだ！
ということで導入したプラグインが『Instagram Slider Widget』
Instagram導入プラグインは最近のいろいろあるんですが今回はこちらを選択。
ウィジェットタイプのプラグインなのでpage builder by SiteOriginで作ってるページとの相性も良いです。
難しい事はないので説明は省きます。
ちなみにこのフロントページ用に新たにInstagramアカウントを作りました！
ブログ用の固定ページにカテゴリー別で新着記事を表示させるためにしたこと
先ほど説明した、”新着記事をスライダー表示するためにしたこと”でもサラッと触れましたが使用するプラグインは『shortcode Ultimate』です。
このプラグインには[投稿]というショートコードがありますがそっちは使いません。
（多くの方が投稿のショートコードを利用したやり方を書いてますね）
使うのは[スライダー]です。
ただ選択するソースが違うので説明します。
ソースで[カテゴリ]を選択します。
すると、どのカテゴリを抽出するか選択肢が出てくるのでその中から好きなものを選びます！
複数選択出来ます！
リンクは[投稿パーマリンク]のままで大丈夫です。
他はご自由に設定してください。
すると、指定されたカテゴリから最新記事がスライダーで表示されるようになります！
各カテゴリ毎にショートコードを作ってページ内に挿入しましょう(^^)
ちなみに僕は見出しのショートコードを作成してカテゴリの名称を表示しています！
でも、このページは今後より見やすく改善していく予定です！！
まとめ
いかがでしたか？
今回使用したプラグイン
- page builder by siteorigin
- shortcode Ultimate
- Instagram Slider Widget
wordpressって難しく感じますがプラグインを効果的に利用することで手軽に自分好みのブログサイトを構築できます。わからなければググればだいたいの事は調べられるので諦めず頑張りましょう！
まだまだ改善して、このブログを見やすく魅力的にしていきますので…乞うご期待！！
コメント