2021.05.10

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

スポンサーリンク

自作テーマのコンセプト

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


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


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

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

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

 

 

 

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

 

 

必要なメニュー項目を追加していきます。

 

カテゴリーを設定する方法

 

 

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

親カテゴリーにはカスタムリンクを追加します。


URLの項目には #! を記載し、リンク機能を停止させます。


なぜリンク機能を停止するのかというと、クリックした際トップまで遡ってしまうためです。


ナビゲーションラベル項目には表示させるカテゴリー名を入れてください。


上記画像を参照していただきたいのですが、 <i class="fas fa-code"></i> という記載をしていると思います。


これは
Font Awesome といってアイコンを簡単に設定できるものです。


お好みでコードを入れ替えてください。


あとは関連したカテゴリーを追加していき、カスタムリンク配下にドラッグアンドドロップしてください。


これでネストされたカテゴリーを実現させることが可能になります。

 

 

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

 

 

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


前提としてこのテーマでは、ピックアップ記事数は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に公開は出来てはいませんが、早いうちに出したいとは思っています。