WordPress Astra テーマのカスタマイズ・インストールからレイアウトの設定まで（その１）
Astra（テーマ）について
VM環境（Ubuntu Server 16.04LTS）上のWordPressに海外製のテーマAstra（無料版）をインストールしてみた。
パフォーマンスが良いとの記事を見かけたのと日本語での記事があまりなかったので”お試し”の意味でVM環境にインストールして色々と試してみることにした。
説明文（英語）にはざっくりと以下の様な事が書いてあった
- ブログ、個人のポートフォリオ、ビジネスサイト、ECサイトに適している
- 高速でカスタマイズ可能
- 非常に軽量（50KB未満）
- SEOを念頭に置いて構築されている（Schema.orgに対応）
星評価も良くて評価数も多かったのも”お試し”をしてみる気になった理由のひとつ。
ちなみにこのブログは（2018年8月22日現在）Huemanを使用しているのでAstraではない。
有料版について
Astraには無料版の他に
- プロ版
- ミニ代理店版
- 代理店版
の３種類の有料バージョンがある。
有料版にすると「透明ヘッダー」「トップページに戻る付箋」「EC用のプラグインWooCommerce対応」などが可能になる。
詳しくはこちらを参照。
この記事では無料版でできる範囲の事を試してみる事にする。
インストール
WordPressのメニューから外観ー＞テーマー＞新しいテーマを追加から検索ボックスで”Astra”を検索する。
マウスオーバーさせると”インストール”ボタンが表示されるのでクリック、インストールが完了したら”有効化”をクリックする。
子テーマの作成
style.cssを直接編集するとテーマがバージョンアップされた時に編集した内容が飛んでしまう事があるので子テーマを作成することにした。
子テーマの作成については以前にHestiaの子テーマを作成した時の記事を参照。
上記記事の「子テーマ用のディレクトリーの作成」～「所有者の変更」までを実行すると外観ー＞テーマにAstraの子テーマが表示されるので”有効化”をクリックする。
カスタマイズ
今回の記事はカスタマイズのレイアウトまでを対象とする。
レイアウト
コンテナ
コンテナ幅 | コンテナの幅を指定する デフォルトは1200
| ||||||||
標準コンテナ | 以下の４種類が選択できる
それぞれコンテンツの表示形式が異なる
| ||||||||
固定ページのコンテナ | 固定ページのコンテンツの表示形式 標準コンテナと同様、４種類が選択できる ”デフォルト”を選択すると標準コンテナと同じレイアウトになる | ||||||||
投稿のコンテナ | 投稿ページのコンテンツの表示形式 標準コンテナと同様、４種類が選択できる ”デフォルト”を選択すると標準コンテナと同じレイアウトになる | ||||||||
アーカイブのコンテナ | アーカイブページのコンテンツの表示形式 標準コンテナと同様、４種類が選択できる ”デフォルト”を選択すると標準コンテナと同じレイアウトになる |
ヘッダー
Site Identity
サイトのヘッダーに関する設定を行う
ロゴ | ヘッダーに表示されるロゴを指定する | ||||
Different Logo for retina devices? | チェックをするとレティーナデバイス（高解像度ディスプレイ）用の別ロゴを設定できるようになる | ||||
Different Logo for mobile devices? | チェックをするとモバイルデバイス用の別ロゴを設定できるようになる | ||||
ロゴの幅 | ロゴの幅を指定する | ||||
サイトのタイトル | サイトのタイトル | ||||
サイトタイトルを表示 | チェックをした時だけ上記のサイトのタイトルが表示される | ||||
キャッチフレーズ | キャッチフレーズ | ||||
サイトキャッチコピーを表示する | チェックをした時だけ上記のキャッチフレーズが表示される | ||||
インラインロゴ & サイトタイトル | ロゴとサイトタイトルの位置関係が変わる
| ||||
サイトアイコン | サイトアイコン（ファビコン）を指定する |
メインヘッダー
Header Layout | ロゴとタイトルの位置を下記の３種類から選べる
| ||||||||
メニューを無効化 | メニューを非表示にする
| ||||||||
Last Item in Menu | メニューの一番右に表示するコンテンツを下記の中から指定ができる
| ||||||||
下部ボーダーサイズ | メニュー下部の縁のサイズを数字で指定する 下記は５を指定した時の例（色は黒）
| ||||||||
下部ボーダー色 | 上記、メニュー下部の縁の色 | ||||||||
ヘッダー幅 | ”全幅”と”コンテンツの幅”の２種類が選択できる 全幅を選択するとロゴ・タイトルとメニューが両サイドいっぱいに配置される |
MOBILE HEADER
モバイルの時の設定
Menu Breakpoint | レシポンシブデザインなので画面サイズ（横幅）が狭くなるとメニューが三本線のハンバーガーメニューに自動的に変化する その変化する時のポイント
| ||||||
Dropdown Target | 下記の
が選択できる それぞれ、サブメニューがある時の動作が異なる ”ブログ”メニューの下位に”投稿２”サブメニューがある前提
| ||||||
Toggle Button Style | ３本線メニュー（ハンバーガーメニュー）の表示形式
| ||||||
Toggle Button Color | ハンバーガーメニューの色 下記、黒を指定した例
| ||||||
Border Radius | 角の丸み 下記、１０を指定した時の例
| ||||||
モバイル端末向けメニューラベル | メニューのラベル
| ||||||
モバイルヘッダー位置 | 下記の２パターンが指定できる
|
ブログ
ブログ / アーカイブ
ブログページ／アーカイブページでの投稿一覧の表示形式を指定する
ブログ投稿コンテンツ | ブログページでの本文の表示形式
| ||||
ブログ投稿の構造 | 以下の２項目について表示／非表示の設定ができる
ブログメタの詳細な項目については後述の”ブログメタ”を参照
| ||||
ブログメタ | コメント、カテゴリ、作成者、公開日、タグの表示／非表示の設定ができる またドラッグ＆ドロップで順番が変更できる
| ||||
ブログコンテンツ幅 |
が指定可能でカスタムの場合は数値で幅が指定できる 下記は６００を指定した時の例
|
単一記事の投稿
ブログの単一記事（記事の詳細ページ）での表示形式。
前述の”ブログ / アーカイブ”での投稿一覧と指定の仕方は同じ。
サイドバー
サイドバーの表示位置と割合（％）を設定できる
デフォルトレイアウト | 標準でのサードバーの位置を
の３パターンから設定できる
|
固定ページ | 固定ページでのレイアウトをデフォルトレイアウトとは別に設定ができる
の４種類から選択ができる デフォルトを選択するとデフォルトレイアウトで選択したレイアウトと同じになる |
ブログ投稿 | ブログ投稿ページでのレイアウトをデフォルトレイアウトとは別に設定ができる 後は”固定ページ”と同様 |
ブログ投稿アーカイブ | ブログ投稿アーカイブページでのレイアウトをデフォルトレイアウトとは別に設定ができる 後は”固定ページ”と同様 |
サイドバーの幅 | サイドバーの幅を％で指定する デフォルトは３０％ |
フッター
フッターウィジェット1
フッターにウィジェット（４つ）表示させることができる
| フッターのウィジェットをDisable（無効）にする |
 | フッターにウィジェットを表示する ウィジェットはWordPressのメニューから外観ー＞ウィジェットでフッターウィジェットエリア１～４に追加する 下記はフッターウィジェットエリア１に画像ウィジェットを追加した例
|
フッターバー
フッターの更に下にあるバーの表示形式についての設定。
複数のレイアウトが指定できる。
フッターバーレイアウト | Disable（無効）の他に下記の２パターンのレイアウトが選択できる
| ||||||
セクション１ |
が選択できる
| ||||||
セクション２ | セクション１と同様の設定ができる | ||||||
フッターバー幅 |
の２種類から選択ができる | ||||||
フッターバー上部ボーダー | フッターとフッターバーとの境目の幅を数値で指定する 下記は１０を指定した時の例
| ||||||
Footer Bar Top Border Color | 上記のフッターバー上部ボーダーの色 |
つづく
レイアウトの設定は以上で終了。
「色と背景」以降の設定については別記事とする。
最近のコメント