Aak WordPressテーマのカスタマイズ方法

Aak

Aak

Aak のカスタマイズ

Aakは、高度にカスタマイズ可能で軽量な多目的なテーマであり、Webサイトを簡単に作成できます。ブログ、雑誌、ニュース、ビジネス、オンラインショップ、クリエイティブ、ホテル、レストラン、スタートアップなど、あらゆる種類のWebサイトで使用できます。AaKを使用すると、パフォーマンス、モダンなデザイン、パワフルでありながら使いやすいオプションを完璧に組み合わせることができます。

新しいブロックエディター(Gutenberg)や、WooCommerce、JetPack、Elementorページビルダー、SEOプラグインなどのお気に入りのプラグインと完全に連携します。

WordPress.org Aak
バージョン1.1.2
最終更新日 2021年11月17日
有効インストール200+
PHPバージョン5.6以上
Aak の概要 2021年12月現在

>> Aak のカスタマイズ方法

Aak をカスタマイズする方法は大きく分けて、テーマカスタマイザーを使う、cssの追加をする、直接テンプレート(PHP)ファイルを書き換えるになります。プラグインを利用すると素早く安全にカスタマイズすることも可能です。

プラグインを利用するにしても、直接テンプレート(PHP)ファイルを書き換えるにしてもリスクが発生するので、バックアップ環境は整えておかれることを推奨します。

Aak をカスタマイズするには下記の手順で行います。

  1. WEBサイトの構成を考える (※注1)
  2. 不要な機能を削除する
  3. 必要な拡張機能(プラグイン)を追加する
  4. グローバルナビゲーションやサイドメニューを作る
  5. TOPページを作る
  6. 発信者情報ページを作る
  7. お知らせや、ブログ(製品やサービスをカテゴリーに構成する)を設置する

※ 注1)固定ページ・投稿ページのコンテンツを書き出す。そしてカテゴリーやタグを振り分ける。などの設計書・制作ガイドラインを作成しておくと作業をスムースに進めることができ、修正が発生しても最小限の工程で完結できるようになります。

テーマカスタマイザー

Aakのテーマカスタマイザーでは下記の内容で設定をすることができます。設定できる箇所も多くデザインにこだわりたい場合にはおすすめではないでしょうか?

Aak Theme Typogrphy
(文字のデザイン)
Select Theme body Font
– Poppins
– Roboto
– Open Sans
– Lato
– montserrat
Body font Size
Body font Lineheight
Select Header Tag Font
Site Header Font Weight
Aak Top bar
The beshop topbar options
(ベショップトップバーオプション)
– Show header topbar?
Topbar Container Type
– Standard Container
– Full Width Cntainer
Welcome text(テキスト入力)
– Show header topbar menu?
– Show header topbar search?
Topbar Background Color
Topbar text Color
Topbar link hover Color
サイトの基本情報サイトのタイトル
キャッチフレーズ
Aak HeaderSite Header Style
– Style One
– Style Two
Logo Position
– Logo Left
– Logo Center
– Logo Right
Main menu Position
– MENU Left
– MENU Center
– MENU Right
ヘッダーテキスト色
背景色
ヘッダー画像1800 × 250 px
Aak BlogContainer type
– Standard Container
– Full width Container
Select Blog Layout
– Rght Sidebar
– Left Sidebar
– Full width
Show Posts Date?
Show Posts Author?
Show Posts Categories?
Show Posts tags?
Aak BlogPage Container type
– Standard Page Container
– Full Width Page Container
Aak テーマカスタマイザー

Aak のカスタマイズはいろいろな方法があります。WordPressの管理画面からカスタマイザーを利用してフォントや色、レイアウトなどをカスタマイズする方法。CSSを追加してカスタマイズする方法。プラグインをインストールして機能をカスタマイズする方法。「テーマーの編集」から直接編集する方法などがあります。

Aakのウイジェットエリアは以下の3つになっています。

  • Sidebar
  • Footer Widget
  • Footer Block Widget

css(スタイルシート)を追加

Aak に css(スタイルシート)を追加
Aak に css(スタイルシート)を追加

部分的に色を変更したり、文字の大きさを変更したりしたいのであればcss(スタイルシート)を追加することになります。cssの(スタイルシート)を追加する場合は、テーマカスタマイザーの「css追加」を利用するか、テンプレートファイルの「style.css」に追加することになります。

テーマカスタマイザーの「css追加」は複雑なコード編集は苦手ですが、テーマの更新に上書きされることはありません。逆にテンプレートファイルの「style.css」は上書きされるので、子テーマで対応するか、バックアップをとり対応するかになります。

テンプレートファイル(PHP)のカスタマイズ

テンプレートファイル(テーマファイル)のカスタマイズは、外観 → テーマファイルエディタで編集することになります。テンプレートファイルの構成は各テーマによって異なっていますが概ね以下のようなファイルで構成されています。

  • スタイル(style.css)
  • テーマの関数
  • 404テンプレート
  • コメント
  • テーマフッター
  • テーマヘッダー
  • 検索フォーム
  • 単一テンプレート

テンプレートファイルを直接編集してカスタマイズすることもできます。ただ、この方法は高度な知識を必要とされますので、十分な知識をお持ちの方におすすめなります。記述ミスによって画面が表示されなくなったり、管理画面にログインすらできなくなったりすることもあります。

プラグインでカスタマイズ

公式テーマは審査後公認され無料で利用できるようになります。基本部のみの配信のため拡張機能を利用したい場合はプラグインで機能を拡張させることになります。

Table of Contents Plusページ内のコンテンツの目次を作成
All in One SEO PackSEOを一括して設定
WP Multibyte Patchマルチバイト文字の修正(コンタクトフォームを利用するなら必須)
Duplicatorサイトを丸ごとコピーしてバックアップ
WP Maintenance Modeメンテナンス中であることを表示
Pz-LinkCard外部リンクをカード形式で表示
WP-Optimizeデータベースをクリーンアップ
Insert Pagesページ内に文章を埋め込む
RedirectionURLをリダイレクト
Broken Link Checkerリンク切れをチェックする
カスタマイズに使いたいプラグイン