IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

ホーム / genesis / WordPress:Genesis Framework を使ったテーマ制作(1)

WordPress:Genesis Framework を使ったテーマ制作(1)

2022/03/21 genesis, Wordpress

現在、このサイトをはてなブログから WordPress に移行しようとテーマを作成中なんですが、Genesis Framework を使っていますので、WordPress 理解のためにも手順を整理していこうと思います。すでにひとつのサイトは移行済みです。

  • そんなには褒めないよ。映画評 – ネタバレレビュー・あらすじ

ただ、WordPress を使い始めてまだ半年ですし、いきなり Genesis から入りましたので、これから書いていくことが WordPress 本体からみてより良い方法かどうかはわかりません。

  • Genesis Framework とは
    • Genesis Framework の長所短所
  • Genesis Framework の導入
    • 導入手順
  • ゼロからGenesis 子テーマをつくる

Genesis Framework とは

Genesis Framework とは、WordPress サイトを構築するための基本構造であり、親テーマという理解でいいと思います。以前は有料だったようですが、現在はオープンソースとなっています。

  • Open Source Genesis Framework – StudioPress

Genesis Framework 自体には子テーマは付属していませんが、Genesis Sample Theme が無料で提供されていますので、CSS の知識があればそれをもとにテーマを作成することもできます。

  • GitHub – studiopress/genesis-sample: This is the sample theme created for the Genesis Framework.

Genesis Framework の長所短所

「Genesis は SEO に優れている」

おそらくこれが一番の長所であり、多くの人が興味を持つ理由なんだろうと思います。ただ、私は他のテーマと比べられるほどの情報も持っていませんので実際のところよくわかりません。ググりますと丁寧に説明されている記事があります。私もそれらを読んで興味を持ったということです。

「日本語情報が少ない」

短所はこれだと思いますが、Google翻訳で十分いけます。もうひとつ、PHP の理解が必要ということもありますが、テーマを自作しようという人がこれで躓くことはないでしょう。

Genesis Framework の導入

Get Genesis Framework for Free から Genesis Framework を落としてきます。必須入力項目はメールアドレスだけです。現在のバージョンは genesis.3.3.5 です。

同時に上のリンクページの Next… にある genesis Sample Theme の子テーマもダウンロードしておけば使用しないにしても参考になると思います。

導入手順

ダウンロードした genesis.3.3.5.zip をインストールします。

Sample Theme を使用するのであれば同様にインストールし、有効化します。

こういうサイトが出来上がりますのでこれをもとに希望のサイトに仕上げることも可能です。

ゼロからGenesis 子テーマをつくる

子テーマの制作に必須なものはなにかを調べながら進めていきます。

テーマフォルダに子テーマ名のフォルダを作成し、その直下に style.css ファイルを作成します。ここでは genesis-child としています。

その状態で管理画面(ダッシュボード)のテーマをクリックしますと、「子テーマでは、style.css スタイルシートにテンプレートヘッダが必要です」と表示されます。index.php は独立テーマの場合ですので今回は関係ありません。

スタイルシートに

/*
 * Theme Name: Genesis Child
 * Template: genesis
 */

と書いてみます。

これだけで子テーマの genesis-child が認識されるようになりますので有効化してみます。

これで本当に子テーマが有効になっているかどうか、css を変更して確認してみます。

WordPress 付属の Twenty Twenty-one(下の画像)テーマのスタイルがクリアされ、指定したようにバックグラウンドの色が変更されています。

これで style.css に CSS を指定していけば、WordPress デフォルトの構造であればサイトは完成します。ただ、これでは Genesis を使う理由がありませんので functions.php を使ってサイトをゼロから構築していきます。

ということで今回はここまでです。

バッファロー microSD 128GB 100MB/s UHS-1 U1 microSDXC【 Nintendo Switch/ドライブレコーダー 対応 】V10 A1 IPX7 Full HD データ復旧サービス対応 RMSD-128U11HA/N

バッファロー microSD 128GB 100MB/s UHS-1 U1 microSDXC【 Nintendo Switch/ドライブレコーダー 対応 】V10 A1 IPX7 Full HD データ復旧サービス対応 RMSD-128U11HA/N

  • バッファロー

Amazon

WordPress:インポーターで<pre></pre>内のスペースが削除される
WordPress:Genesis Framework を使ったテーマ制作(2)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

WordPress:テーマをゼロから作ってみる(3)

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ212
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress37
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ1
  • Twitter1
  • 映画1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com