WordPress Astra テーマのカスタマイズ・インストールからレイアウトの設定まで(その1) | そう備忘録

WordPress Astra テーマのカスタマイズ・インストールからレイアウトの設定まで(その1)

Astra(テーマ)について

VM環境(Ubuntu Server 16.04LTS)上のWordPressに海外製のテーマAstra(無料版)をインストールしてみた。

VM環境の構築についてはこちらの記事を参照

パフォーマンスが良いとの記事を見かけたのと日本語での記事があまりなかったので”お試し”の意味でVM環境にインストールして色々と試してみることにした。

説明文(英語)にはざっくりと以下の様な事が書いてあった

  • ブログ、個人のポートフォリオ、ビジネスサイト、ECサイトに適している
  • 高速でカスタマイズ可能
  • 非常に軽量(50KB未満)
  • SEOを念頭に置いて構築されている(Schema.orgに対応)

星評価も良くて評価数も多かったのも”お試し”をしてみる気になった理由のひとつ。

Astra評価

ちなみにこのブログは(2018年8月22日現在)Huemanを使用しているのでAstraではない。

有料版について

Astraには無料版の他に

  • プロ版
  • ミニ代理店版
  • 代理店版

の3種類の有料バージョンがある。

有料版にすると「透明ヘッダー」「トップページに戻る付箋」「EC用のプラグインWooCommerce対応」などが可能になる。

詳しくはこちらを参照

この記事では無料版でできる範囲の事を試してみる事にする。

インストール

WordPressのメニューから外観ー>テーマー>新しいテーマを追加から検索ボックスで”Astra”を検索する。

Astra

マウスオーバーさせると”インストール”ボタンが表示されるのでクリック、インストールが完了したら”有効化”をクリックする。

Astra 有効化

子テーマの作成

style.cssを直接編集するとテーマがバージョンアップされた時に編集した内容が飛んでしまう事があるので子テーマを作成することにした。

子テーマの作成については以前にHestiaの子テーマを作成した時の記事を参照

上記記事の「子テーマ用のディレクトリーの作成」~「所有者の変更」までを実行すると外観ー>テーマにAstraの子テーマが表示されるので”有効化”をクリックする。

Astra子テーマを有効化

カスタマイズ

今回の記事はカスタマイズのレイアウトまでを対象とする。

カスタマイズ レイアウト

レイアウト

コンテナ

コンテナ 設定

コンテナ幅

コンテナの幅を指定する

デフォルトは1200

コンテナ幅

標準コンテナ

以下の4種類が選択できる

  1. 固定幅
  2. Content Boxed
  3. 全幅/収める
  4. 全幅/ストレッチ

それぞれコンテンツの表示形式が異なる

固定幅コンテナ 固定幅
Content Boxedコンテナ Content Boxed
全幅/収めるコンテナ 全幅/収める
全幅/ストレッチコンテナ 全幅/ストレッチ

固定ページのコンテナ

固定ページのコンテンツの表示形式

標準コンテナと同様、4種類が選択できる

”デフォルト”を選択すると標準コンテナと同じレイアウトになる

投稿のコンテナ

投稿ページのコンテンツの表示形式

標準コンテナと同様、4種類が選択できる

”デフォルト”を選択すると標準コンテナと同じレイアウトになる

アーカイブのコンテナ

アーカイブページのコンテンツの表示形式

標準コンテナと同様、4種類が選択できる

”デフォルト”を選択すると標準コンテナと同じレイアウトになる

ヘッダー

Site Identity

サイトのヘッダーに関する設定を行う

Site Identity 設定

Site Identity 設定

ロゴ

ヘッダーに表示されるロゴを指定する

Different Logo for retina devices?

チェックをするとレティーナデバイス(高解像度ディスプレイ)用の別ロゴを設定できるようになる

Different Logo for mobile devices?

チェックをするとモバイルデバイス用の別ロゴを設定できるようになる

ロゴの幅

ロゴの幅を指定する

サイトのタイトル

サイトのタイトル

サイトタイトルを表示

チェックをした時だけ上記のサイトのタイトルが表示される

キャッチフレーズ

キャッチフレーズ

サイトキャッチコピーを表示する

チェックをした時だけ上記のキャッチフレーズが表示される

インラインロゴ & サイトタイトル

ロゴとサイトタイトルの位置関係が変わる

チェック時インラインロゴ チェック時
未チェック時インラインロゴ 未チェック時

サイトアイコン

サイトアイコン(ファビコン)を指定する

メインヘッダー

メインヘッダー

Header Layout

ロゴとタイトルの位置を下記の3種類から選べる

左左
中央中央
右右

メニューを無効化

メニューを非表示にする

メニューを非表示にする

Last Item in Menu

メニューの一番右に表示するコンテンツを下記の中から指定ができる

なし何も表示しない

検索

検索アイコンが表示される

検索

テキスト/HTML

任意のテキスト/HTMLを指定する

下記は”お問い合わせボタン”の設置例

問い合わせボタン

以下の様に表示される

テキスト/HTML

ウィジェット

ここでウィジェットを指定してWordPressのメニューから外観ー>ウィジェットでヘッダーにウィジェットを追加するとメニューの右側にウィジェットが表示されるようになる

下記は画像ウィジェットの追加例

画像ウィジェットを追加した例

下部ボーダーサイズ

メニュー下部の縁のサイズを数字で指定する

下記は5を指定した時の例(色は黒)

下部ボーダーサイズ

下部ボーダー色

上記、メニュー下部の縁の色

ヘッダー幅

”全幅”と”コンテンツの幅”の2種類が選択できる

全幅を選択するとロゴ・タイトルとメニューが両サイドいっぱいに配置される

MOBILE HEADER

モバイルの時の設定

MOBILE HEADER設定

Menu Breakpoint

レシポンシブデザインなので画面サイズ(横幅)が狭くなるとメニューが三本線のハンバーガーメニューに自動的に変化する

その変化する時のポイント

Menu Breakpoint

Dropdown Target

下記の

  1. Icon
  2. Link

が選択できる

それぞれ、サブメニューがある時の動作が異なる

”ブログ”メニューの下位に”投稿2”サブメニューがある前提

Icon

1をタップするとサブメニューは表示されずにブログページに遷移する

2をタップするとブログのサブメニューが表示される

Dropdown Target Icon選択時

Link

1をタップするとサブメニュー(投稿2)が表示される

サブメニューの”投稿2”が表示されている状態で再度1をタップすると”ブログ”ページに遷移する

2をタップしてもサブメニューが表示される

Dropdown Target Link選択時

Toggle Button Style

3本線メニュー(ハンバーガーメニュー)の表示形式

Fill

Toggle Button Style Fill

Outline

Toggle Button Style Outline

Minimal

Toggle Button Style Minimal

Toggle Button Color

ハンバーガーメニューの色

下記、黒を指定した例

ハンバーガーメニューの色

Border Radius

角の丸み

下記、10を指定した時の例

Border Radius 10

モバイル端末向けメニューラベル

メニューのラベル

メニューラベル

モバイルヘッダー位置

下記の2パターンが指定できる

モバイルヘッダー位置 通常モバイルヘッダー位置 通常
モバイルヘッダー位置 中央モバイルヘッダー位置 中央

ブログ

ブログ / アーカイブ

ブログページ/アーカイブページでの投稿一覧の表示形式を指定する

ブログ / アーカイブ 設定

ブログ投稿コンテンツ

ブログページでの本文の表示形式

抜粋

本文が長い時は抜粋になる

抜粋

全てのコンテンツ

全て表示される

全てのコンテンツ

ブログ投稿の構造

以下の2項目について表示/非表示の設定ができる

  1. おすすめの画像
  2. タイトル&ブログメタ

ブログメタの詳細な項目については後述の”ブログメタ”を参照

ブログ投稿の構造

ブログメタ

コメント、カテゴリ、作成者、公開日、タグの表示/非表示の設定ができる

またドラッグ&ドロップで順番が変更できる

ブログメタ

ブログコンテンツ幅

  1. デフォルト
  2. カスタム

が指定可能でカスタムの場合は数値で幅が指定できる

下記は600を指定した時の例

ブログコンテンツ幅

単一記事の投稿

ブログの単一記事(記事の詳細ページ)での表示形式。

前述の”ブログ / アーカイブ”での投稿一覧と指定の仕方は同じ。

単一記事の投稿 設定

サイドバー

サイドバーの表示位置と割合(%)を設定できる

サイドバー 設定

デフォルトレイアウト

標準でのサードバーの位置を

  1. サイドバー無し
  2. 左サイドバー
  3. 右サイドバー

の3パターンから設定できる

レイアウト サイドバー

固定ページ

固定ページでのレイアウトをデフォルトレイアウトとは別に設定ができる

  1. デフォルト
  2. サイドバーなし
  3. 左サイドバー
  4. 右サイドバー

の4種類から選択ができる

デフォルトを選択するとデフォルトレイアウトで選択したレイアウトと同じになる

ブログ投稿

ブログ投稿ページでのレイアウトをデフォルトレイアウトとは別に設定ができる

後は”固定ページ”と同様

ブログ投稿アーカイブ

ブログ投稿アーカイブページでのレイアウトをデフォルトレイアウトとは別に設定ができる

後は”固定ページ”と同様

サイドバーの幅

サイドバーの幅を%で指定する

デフォルトは30%

フッター

フッターウィジェット1

フッターにウィジェット(4つ)表示させることができる

フッターウィジェット 設定

Disable

フッターのウィジェットをDisable(無効)にする

フッター ウィジェット

フッターにウィジェットを表示する

ウィジェットはWordPressのメニューから外観ー>ウィジェットでフッターウィジェットエリア1~4に追加する

下記はフッターウィジェットエリア1に画像ウィジェットを追加した例

フッターウィジェットエリア

フッターバー

フッターの更に下にあるバーの表示形式についての設定。

複数のレイアウトが指定できる。

フッターバー

フッターバー

フッターバーレイアウト

Disable(無効)の他に下記の2パターンのレイアウトが選択できる

フッターバーレイアウト 縦並びフッターバーレイアウト 縦並び
フッターバーレイアウト 横並びフッターバーレイアウト 横並び

セクション1

  1. なし
  2. フッターメニュー
  3. Custom Text
  4. ウィジェット

が選択できる

フッターメニュー

メニューが追加されるのでWordPressのメニューから外観ー>メニューのメニュー設定でフッターメニューのチェックボックスにチェックを入れるとメニューが表示される

Custom Text

任意のテキストが設定できる

ウィジェット

ウィジェットが追加されるのでWordPressのメニューから外観ー>ウィジェットからフッターバーセクション1、2にウィジェットが追加できる

セクション2

セクション1と同様の設定ができる

フッターバー幅

  1. 全幅
  2. コンテンツの幅

の2種類から選択ができる

フッターバー上部ボーダー

フッターとフッターバーとの境目の幅を数値で指定する

下記は10を指定した時の例

フッターバー上部ボーダー

Footer Bar Top Border Color

上記のフッターバー上部ボーダーの色

つづく

レイアウトの設定は以上で終了。

「色と背景」以降の設定については別記事とする

souichirou

やった事を忘れない為の備忘録 同じような事をやりたい人の参考になればと思ってブログにしてます。 主にレゴ、AWS(Amazon Web Services)、WordPress、Deep Learning、RaspberryPiに関するブログを書いています。 仕事では工場に協働ロボットの導入や中小企業へのAI/IoT導入のアドバイザーをやっています。 2019年7月にJDLA(一般社団法人 日本デイープラーニング協会)Deep Learning for GENERALに合格しました。 質問は記事一番下にあるコメントかメニュー上部の問い合わせからお願いします。

おすすめ

質問やコメントや励ましの言葉などを残す

名前、メール、サイト欄は任意です。
またメールアドレスは公開されません。