wordpress

wordpress初心者でもちょっとかっこいいメニューを作る方法!

2019年12月14日

wordpressでページの上部にカテゴリー別のメニューがあったらいいなと思っていませんか?

プラグイン「Page Builder」「 SiteOrigin Widgets Bundle」を使えば簡単初心者でも作れます!

 

オリジナルメニュー 

以前使用していたメニューですが、このメニュー初心者ながら自分で作ってみました!

Page BuilderSiteOrigin Widgets Bundleの使い方も含めて作り方を詳しく説明します!

 

 

1.SiteOriginと Widgets Bundleとは?

 

このプラグインは初心者の超強力な味方!

これをこうしたい!って望みを叶えてくれる万能プラグインです!

例えば、画面を2分割して写真の横に説明文を入れるとか

オリジナルのボタンもちゃちゃっと簡単に作ることが出来るんです!

必ず二つセットでインストールをしましょう!

それでは早速自作したメニューの作り方を説明していきます

 

2.オリジナルメニューの作り方

 

①プラグインのインストール

プラグインの新規追加でPage BuilderSiteOrigin Widgets Bundleを探し

インストールして有効可して下さい

 

②メニューの位置

メニューを設置する位置ですが、私は記事の上部に作りたかったので

カスタマイズ画面からウィジェットメインエリア上部に入れることにしました

※私のテーマではメインエリア上部となってますがテーマによって若干違うかもしれません

ウィジェットを入れる場所 

★ウィジェット
投稿記事を表示してから、上部メニューのカスタマイズ→ウィジェット

 

ウィジェットを追加 

 
★ウィジェットを追加
メインエリア上部をクリックすると上のような画面が出てきます
ウィジェットを追加をクリックし右のメニューからレイアウトビルダーを探しクリック
③次の画面に移りビルダーを開くをクリック
 
 

 

③表題部分の作り方

 

ページビルダー 

①列を追加
レイアウトビルダーをクリックすると上のような画面が開くので列を追加をクリック

 

レイアウトビルダー カラム 

行のスタイル

 

②カラムの設定
カラムとはwordでいうと段組みみたいな感じで、横に何列構成にするか設定するところ
今回は表題なので1カラムを設定します
①今入力されている2を1に打ち変えるか又はサイドの上下ボタンで設定する
②右のレイアウトをクリックして、下余白、ガターを0にする
挿入ボタンをクリック

 

ウィジェットを追加 

③ウィジェットを追加
元のページビルダーの画面に戻るのでウィジェットを追加をクリック

 

 

SiteOrijin Headline 

★SiteOrijin Headline
①さっきインストールしたウィジェットが複数出てくるので
その中からSiteOrijin Headline
を見つけてクリックする
SiteOrijin Headlineは表題を作るウィジェットで、フォントが膨大な量あるので使ってみました!

 

SiteOrijin Headlineの編集 

★ページビルダー
SiteOrijin Headlineが挿入されたら、右上の編集をクリック
 
 

SiteOrijin Headlineの画面説明 

SiteOrijin Headlineの画面説明2 

★menuの設定
上の図のように設定しています
各項目の説明も参照下さい!

 

SiteOrijin Headlineのデザイン

★デザインの設定
最後に右のメニューにあるデザインを左のように背景を黒に設定

これでmenuの部分は完成!

 
 

 

④カテゴリー部分の作り方

最初の手順はさっきとだいたい同じです(表題部分作り方①~③を参照下さい)

※行スタイルのレイアウトも同じ設定でOKです

今回は、カテゴリーが3つなので3カラムを選択し挿入をクリック

ウィジェットを追加SiteOrigin Featuresを選択し、右上の編集をクリック

 
SiteOrigin Features
アイコンや画像に対する表題や説明分やリンクを簡単に作ることができます!
 

 

SiteOrigin Features

★SiteOrigin Features①
アイコンの設定から行くので上のほうにあるAddをクリックし次に右の小さい▼をクリック

 

 

SiteOrigin Featuresの画面説明

★SiteOrigin Features②
上のような画面となるのでアイコンの設定を行います
各項目の説明を参照ください

 

 

SiteOrigin Featuresの画面説明2

★SiteOrigin Features③
下にスクロールしていき、タイトル説明リンク先URLを入力します

 

 

 

SiteOrigin Featuresの画面説明3

★SiteOrigin Features④
さらに下にスクロールし、アイコンの背景並べる数等を設定していきます

 

ウィジェットのスタイル

★SiteOrigin Features⑤
最後に右側のデザイン背景色黒境界線白を選択し、右下終了ボタンをクリック!

 

SiteOrigin Featuresの重複

★SiteOrigin Features⑥
カテゴリー別に作るので重複でコピーしてあと2つ同様に作成していけば完成!
 
 
 
★point
今回私は、カテゴリー別境界線を設けたかったので、featuresウィジェットを3つ作りましたが
境界線が要らない場合は、features1つfeatures per rowを3にすればOKです!
フォントの種類アイコンの大きさなどはお好みに応じて変更をしてください
 
 

 

まとめ

初心者のアラフォー女子でもちょっとかっこいいメニューを作ることができました!

超便利プラグイン様のおかげです!

★Page Builder

★SiteOrigin Widgets Bundle

必ずセットインストールして下さいね

このプラグインこれ以外も超便利な機能が満載です

それについては別の記事にご紹介していきます!

 

 

-wordpress

© 2020 maroroblog