ワードプレス

無料テーマを活用しよう XeoryExtension

  • このエントリーをはてなブックマークに追加

WordPressのインストール設定まで終えれば、あとはテーマ(テンプレート)をどうするか。

オリジナルを作成するのも良いですが、テーマを作るのに時間がかかり過ぎて、

コンテンツが整うまでには、大変な労力を使ってしまいます。

今回は、XeoryExtensionという無料テーマを上手く活用していく方法を書いてみようと思います

 

XeoryExtensionのダウンロード

 

ダウンロードはこちらのデモサイトからどうぞ

デモサイトを見るだけでも胸がワクワクするのは私だけでしょうか?

とてもシンプルで縦のスクロールするだけで、様々な情報が入ってきます。

企業サイトにも個人のブログにでも最適だと思います。

 

さてダウンロードできたら、そのままお使いになるのではなく、

子テーマをアップロードしてお使いください。

但し、XeoryExtensionチームでは、子テーマまでは提供されていません。

 

それで、今回は詳しく子テーマの作成方法をお伝えしようかと思います。

 

子テーマの作成

 

そもそも子テーマとは何か?

  • 子テーマは、親テーマと呼ばれる別のテーマの機能とスタイルを継承したテーマです。

なぜ子テーマを使うのか?

  • テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれません。子テーマを使用すればテーマの変更は確実に保持されます。
  • 子テーマを使用することで開発時間を短縮できます。
  • 子テーマの使用することでWordPressのテーマの開発を良い形で学べます。

 

作成にあたり、準備していただくのは、

  • テキストエディタ

無償では、TeraPadサクラエディタなどがあります。

くれぐれもPCに付属されているメモ帳は使用しないでください。

※私も知らないで、普通にメモ帳で作成したらエラーになりました。

 

次は、フォルダとその中のデータを作成していきます。

  • 子テーマディレクトリ(データフォルダ)
  • style.css(css:テキストデータ名)
  • functions.php(php:テキストデータ名)

空ファルダをデスクトップに作ります。ファルダ名を「xeory_extension-child」としてください。

名前は間違えないようにしてください。後に親テーマを探せなくなります。

 

空のフォルダができたら、次は下記のコードをコピーしstyle.cssを作成します。

/*
Theme Name: XeoryExtension-child
Theme URI: http://xeory.jp/extension
Description: Child theme for the Xeory
Author: バズ部
Author URI: http://bazubu.com/
Template: xeory_extension
Version: 0.2.1
*/

 

エディタに貼り付け終えたらstyle名で保存(css)します。

保存先はディスクトップにあるフォルダ「xeory_extension-child」。

 

次は下記のコードを貼り付けPHPファイルをfunctions名で(php)同じファルダに保存。

<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array(‘parent-style’)
);
}

 

 

フォルダを圧縮

 

「xeory_extension-child」フォルダをZipで圧縮します。

同じくディスクトップに保存。

WordPress介してデータをアップする場合に圧縮は必要です。

FTPでファイルをアップロードする場合には上記は必要ありません。

 

WordPressの管理画面から子テーマをアップロード

 

アップロードは親テーマと同じ手順。

WordPress管理画面の外観→テーマ→新規追加→テーマのアップロード

という流れです。

 

私は、子テーマを作るのにググって丸一日もかかりました。

それでもWordpress画面から

「親テーマが探せません」「親テーマをダウンロードしてください」など

何度も失敗していました。

 

でも何度もやり続けて、親のファイル名の違いや、チーム名の違いに

気づくようになりました。

私のようにサイト構築で時間をかけるのではなく、

コンテンツ・商品の開発に時間を費やしたほうが、良いかと思い記事にしました。

お力になれれば幸いです。

※子テーマ作成は面倒という方はこちらからダウンロードできます。

    xeory_extension-child .zip

  • このエントリーをはてなブックマークに追加

コメントを残す

*