良い感じのWordPressテーマ・Verbosaの導入とカスタマイズ方法

 今このサイトにも使っているテーマであるVerbosaがなかなかいいので、導入・カスタマイズ手順など紹介していこうと思います。

広告

Verbosaの特徴

 2カラムをベースにしたテーマで、特にSEO的によいといえるわけではないのですが(タグ構成は一寸見たところ確りはしていると思います)、デザインが素敵。色々目立ち過ぎない程度に、ワンポイントにアニメーションがあり、見ていてとても楽しいです。詳しくは公式ディレクトリのプレビューを見ていただければ。

 なお、マガジンレイアウトにも対応しており、ブログだけでなくニュース的なサイトも構成できるようになっています。
 最近のテーマらしく、トップに戻るボタンも装備。更にカスタムメニューにより、SNSのアカウントページに繋げるボタンを設置することができます。
 これらの特徴について、紹介は以下のページで以前行っておりますので、詳しくはそちらをご覧下さい。

導入方法

 WordPress公式ディレクトリにあるテーマなので、テーマ追加画面から導入できます。
 もしくは、下記の公式ディレクトリからダウンロードして追加する形でも、導入が可能です。

カスタマイズ方法

 カスタマイズ方法は、一般的なWordPressページと同じで、

  • 管理画面のサイドバーからカスタマイズを選ぶ
  • ブログ画面の上のバーからカスタマイズを選ぶ

 のどちらかでカスタマイズ画面に移行して設定を行うことができます。

 Verbosaでは、独自のカスタマイズメニューが用意されており、それに従ってテーマの色、レイアウトなど、さまざまなものを決定することが可能です。
 WordPressに独自CSSが導入される前からカスタムCSSがあったぐらいの充実ぶりで、本当に色々な設定ができます。
 主に覚えておくといいのは、それぞれの項目の意味と、その項目の中身で大体どれが設定できるかです。
 それらを、WordPressで元々備わっている項目も含めて一覧にすると、下のようになります(簡易的な解説もつけています。項目名に[VE]とついているのが独自カスタマイズ項目)。

  • About Verbosa: Verbosaについての公式サイト、ドキュメントなどへのリンク。ここからフォーラムへ飛んだり、優先サポートを申し込みにいけたりします。なおナイスなロゴも見れます。
  • Site Identity: 要するにサイトの情報の設定。Identity、つまりサイトの名前などを設定できます。項目としてはサイト基本情報・ヘッダー画像・背景画像を設定可能。
  • [VE]Layout: レイアウトに関して設定できます。サイトの幅から、メイン・レイアウトでサイドバーをどちらにつけるか、記事を並べて表示するページでの表示の仕方、マージン(余白)などを設定できます。
  • [VE]Header: ヘッダのレイアウト設定。Site Identityで設定したコンテンツをどう表示するかの微調整、メニューを表示するかを設定可能。
  • [VE]General: 一般設定です。パンくずリストを出すかどうか、ページネイションをできるようにするかなどを設定できる[Structure](構造)、記事の装飾をどうするかを決めることができる[Decorations](装飾)、投稿した画像についての設定が可能な[Post Images]、SNSメニュー・ウィジェットの場所を設定する[Social Icons]の合計四項目にアクセスできます。
  • [VE]Colors: そのものずばり、サイトの色設定です。背景色、テキスト色など、それなりに詳しく設定することが可能です。リンクカラーは個別CSSでカスタムするのでなければPrimary AccentとSecondary Accentの色で決定される模様。
  • [VE]Post Information: 投稿情報の扱いを設定します。抜粋文やサムネの設定などはこちら。
  • [VE]Typography: タイポグラフィー、つまり字体周りの設定です。様々な場所のフォントを設定可能。行の高さの設定などはFormattingで行えます。
  • [VE]Miscellaneous: 所謂「その他」にあたる項目です。トラブルシューティングの際に弄る項目などがあり、細々としたことを設定できます。
  • メニュー: メニューの位置を設定できます。
  • ウィジェット: ウィジェットをどこにどう挿入するかを設定できます。なお、これについては普通に管理画面から「外観」→「ウィジェット」からでも設定できます。個人的には外観からウィジェット設定ページで設定するほうが分かりやすかった気も。
  • 固定フロントページ: トップページをどうするかを設定。トップページに固定ページを使うか、記事一覧を使うか、などを設定できます。これをどうするかはブログによって千差万別の模様。
  • 追加CSS: この項目から、所謂カスタムCSSを追加できます。基本的に、テーマをアップデートしても白紙にはならない様子。JetPackとか入れておくとやりやすいかもしれません。

 基本的に、以上のことを知っておけばあとはそれなりに流れである程度のカスタマイズは可能かと思いますが、一応、オプションの説明、設定できる項目を詳細まで見る場合は、以下の記事を参考にしてください。各項目の設定に加え、このサイトではどうしているかを述べてあります。サイトの設定は邪魔かもですが、こちらを見ていただければ、だいたいの

SNSメニュー・ウィジェットを使う場合

 Verbosaでは独自のSNSメニュー・ウィジェット(このサイトの一番下にあるTwitterへのリンクのような、SNSへジャンプするためのメニュー)を設定できますが、設定方法がやや複雑ですので、手順を書いておきます。

[SNSメニュー・ウィジェットを作成する手順]
  1. 新規メニュー(以下該当メニュー)を作成
  2. カスタムリンクでTwitterやFacebookなどへのリンクを作成してその該当メニューに追加(ラベルは「Twitter: 任意のID」)
  3. 該当メニューの位置を「Social Links」にセット
  4. カスタマイズ画面から「メニュー」を選択し、「メニューの位置」等から「該当メニュー」の位置を指定する、あるいは指定されているのを確認する。

 なお、これについては以下のForumを参考にしました。

Verbosaの製作者公式ページ及びサポートフォーラム

 分からないことなどあれば、英語が使える場合は以下のフォーラムやドキュメントを見てもいいかもです。

カスタマイズするときに留意すること

 このVerbosaは、2017年4月現在、アップデートが頻繁なほうに入るテーマです。調整などを考えると、部品を付け足す場合、Header and FooterやCode Snippetsでテーマ内のファイルに直接手を加えないようにして処理するのがおすすめです。

その他コメントなど

 ざっとVerbosaについて紹介してみました。案外日本語では紹介しているサイトがなく、いいテーマなのになー、と思いまして、なら自分で書こうと書いた次第。使っていて楽しいテーマです。

広告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA