2021.05.10

【WordPress】自作テーマを作成してみました。名付けて”大正浪漫”

スポンサーリンク

自作テーマのコンセプト

僕が今設定しているテーマです。まだブラッシュアップの余地はありますが一応完成しました。


なぜ大正浪漫という命名にしたかというと、カラーイメージが大正浪漫を彷彿とさせるものだからです。完全に僕の趣味です。
とはいえ、カラーイメージはお好みで簡単に変えられるようにしています。


比較的カスタマイズしやすいユーザフレンドレリーな設計を心がけています。

また、主要な機能以外は極力削ぎ落とし、シンプルな構造にしています。

最低限のSEO対策は施しているつもりですが、もう少しブラッシュアップは必要なので、公開はまだ先になります。

 

ヘッダー画像の設定方法

ヘッダー画像は管理画面から設定します。
外観→ヘッダーを選択




新規画像を追加から設定したい画像をアップロードで設定できます。



 

ヘッダーメニューの設定方法

外観→メニューから設定します。



URLの項目は空でOKです。

ナビゲーションメニューの項目

ナビゲーションラベルにはメニュー名を入れてください。
オプションとしてアイコンを挿入したい場合は、メニュー名の手前にFont Awesomeのコードを貼り付けてください。

CSS Classの項目

この項目にはCSSのクラス名を付与するために「p-header__item」を貼り付けてください。
この記入が漏れるとレイアウトが崩れるのでお忘れなく!

 

親カテゴリー配下に関連した項目も追加したい場合

親カテゴリー配下にサブカテゴリーを置きたい場合、ドラッグアンドロップで持ってくると以下のような形になると思います。



ナビゲーションラベルには親カテゴリー同様メニュー名を入れてください。


CSS Classの項目

ここには「p-header__sub-item」を入れてください。
「p-header-item」ではないので注意してください。

 

ピックアップ記事の設定方法

 

 

ピックアップしたい記事を設定していきます。


前提としてこのテーマでは、ピックアップ記事数は3つまで設定可能となっております。


3つ以上設定してしまうとレイアウト崩れを引き起こしますのでご注意ください。

 

 

まずは新しいメニューを作成していきます。

以下のリンクを押下するとメニューが作成されます。

 

 

ピックアップ記事を選択・追加

投稿の項目にある「全てを表示」というタブを選択し、ピックアップした記事を選択し追加していきます。

 

 

 

記事を追加すると以下画像のような表示がされると思います↓

 

ナビゲーションラベルにはピックアップ記事のタイトルを記載します。


CSS Class(オプション)の設定

CSS Class (オプション)の項目は最初から表示されてはいません。

以下画像を参照し、項目を追加してください。



CSS Class(オプション) が追加されていると思います。
ここには p-pickup__post を記載してください。
これを入れないとレイアウトが崩れるので必ず設定してください。

 

お問い合わせの設定

Contact Form7 というプラグインを使用しますので、プラグインの項目から追加してください。



フォームの項目に以下コードを追加します。

[response]
[text* your-name placeholder "お名前(必須)"]
[email* your-email placeholder "メールアドレス(必須)"]
[text* your-subject placeholder "題名(必須)"]
[textarea* your-message placeholder "内容(必須)"]
[submit "送信"]

項目はお好みで追加してください。


以上で大まかな設定は完了です。

 

最後に

まだ若干のブラッシュアップが必要で、Wordpressに公開は出来てはいませんが、早いうちに出したいとは思っています。