IMUZA.com

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

ホーム / Wordpress / WordPress:Genesis Framework を使ってみる

WordPress:Genesis Framework を使ってみる

2021/09/28 Wordpress

はてなブログから WordPress へ移行準備中です。

  • ここまでの経緯
    • Dropbox での Mysql データ共有の問題点
  • Genesis Framework オープンソース
    • インストール
  • テーマ開発の現状
    • 移行した画像の扱い
    • 画像つき記事一覧
    • WordPress Popular Posts
    • functions.php

ここまでの経緯

新しい記事順

  • WordPress:ローカル開発環境をDropboxで共有
  • WordPress:はてなブログからWordPressへの移行ツール Ver.2
  • WordPress:はてなブログからWordPressへワンクリックで移行
  • WordPress:はてなから移行する場合の permalink rewrite プラグイン

Dropbox での Mysql データ共有の問題点

Docker で Mysql のデータを Dropbox にマウントした場合、ディレクトリのパーミッションを 777 、ファイルのパーミッションを 666 にしておかないと Windows と Linux で共有できません。

また、WordPress のプラグインやテーマをインストールする場合にも書き込み権限がないので ftp を使えと言ってきます。その場合は、プラグインやテーマをダウンロードし、解凍して、それぞれのディレクトリに入れて有効化すれば問題ありません。

とにかく、問題が発生した場合はディレクトリやファイルのパーミッションと考えて間違いないと思います。

ローカルの開発環境ですので 777, 666 で問題ないと思います。

ということで、データの移行はさほど手間ひまかけずに移行できそうですので次はテーマです。

Genesis Framework オープンソース

サイトデザインについては、これまではてなブログでいろいろやってきており、すでにこれが一番かなというものがありますので、既存のテーマでは納得できるものはなく、結局自作ということになります。

まず一番に移行しようと考えているサイトは、映画レビューサイト「そんなには褒めないよ。映画評」です。

www.movieimpressions.com

ただ、これを現時点で一から作るというのはハードルが高すぎますので、親テーマ、あるいはフレームワーク(的なもの)を使うことにしようと思います。

  • テーマフレームワーク – WordPress Codex 日本語版

で、いろいろ WordPerss テーマについての記事を読みますと、Genesis Framework というものが優秀という記事が多く、幸い現在はオープンソースになっているようですので、まずは試しに使ってみることにしました。

www.studiopress.com

インストール

ダウンロードページにいき、email アドレスを入力して「Get Genesis」をクリックすれば zip ファイルが自動で落ちてきます。

子テーマのサンプルもありますので、全体を掴むまではサンプルテーマをベースにやっていこうと思います。同じページの Genesis Sample Theme here のリンクをクリックすれば Github に移動しますので clone するか、zip ファイルをダウンロードできます。

インストールはテーマの新規追加からダウンロードした zip ファイルを指定します。ftp を使えと言ってきたら解凍してテーマディレクトリに入れれば同じことです。

テーマ開発の現状

ということで、現状では WordPress や Genesis のこともそれなりに理解が進み、Genesis Framework でなんとかいけそうな感じがしています。カスタマイズや自作ウィジェットなど整理できれば追々公開していこうと思います。以下、現時点で可能となっている機能等です。

移行した画像の扱い

はてなブログで使っている画像は、上に紹介した「はてなブログ to WordPress 移行ツール Ver.2」で移行すれば記事の表示には問題ありませんが、最新記事一覧などでサムネールを使う場合にはメディアライブラリを使ったほうがいいようです。

ですので、プラグイン Media from FTP などを使ってメディアライブラリに登録しています。

画像つき記事一覧

サイドバーに表示する「記事一覧」「おすすめ映画」は画像つきにしたいのですが、Genesis に付属しているウィジェット「フィーチャーされる投稿」ではアイキャッチ画像を設定していない記事では画像が表示されません。

そのウィジェットのソースは、genesis/lib/widgets/featured-post-widget.php にありますので子テーマにコピーして、記事の最初の画像を取り出し、その URL からメディアライブラリの post_ID を取得してサムネイル画像を表示するように変更しています。

WordPress Popular Posts

よく読まれている記事を表示するためには、カスタムフィールドを作成し、アクセス数をカウントしていくことになると思いますが、単純なアクセス数ではなく、1週間とか2週間とかの期間を指定する必要があり、そうなりますと自作にはそれなりに時間がかかりそうですので、とりあえずはサードパーティーのプラグインを使うことにします。

  • WordPress Popular Posts – WordPress プラグイン | WordPress.org 日本語

functions.php

その他、functions.php で細かいカスタマイズをしています。

  • 記事の最初の画像をページの最上段に表示
    今後 WordPress で書いていく記事にはアイキャッチ画像を設定すればいいのですが、移行する記事は1000記事以上ありますのでさすがにひとつひとつ登録する気にはなりません
  • 独自のナビゲーションメニュー挿入
  • パンくずリスト書き換え
  • タイトルにタグ挿入
    記事タイトルを映画名+1行リードとしていますので、タグを入れて分離しています
  • 記事末尾に「次の記事」「前の記事」挿入

ということで、記事ページのカスタマイズはほぼ完成、次はトップページという段階です。

ビジネスサイトを作って学ぶ WordPressの教科書 Ver.5.x対応版

ビジネスサイトを作って学ぶ WordPressの教科書 Ver.5.x対応版

  • 作者:プライム・ストラテジー株式会社 小川 欣一,穂苅 智哉,森下 竜行,株式会社カイエン,岩本 修
  • ソシム

Amazon

WordPress:ローカル開発環境をDropboxで共有
WordPress:htaccessリライトで、はてなからWordPressへ移行
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/08/13

はてなブログProを解約したらエェ〜?!

2022/08/10

WordPress にプラグインなしで fancybox4 導入

2022/07/29

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

2022/07/14

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

2022/07/7

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

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript96
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress38
  • 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