Written by Manabu Bannai

【無料】最もシンプルでSEOに強いWordPressテーマ『かるいテーマ』を公開しました

PORTFOLIO

WordPressテーマ『かるいテーマ』を自作しました。

karui

※更新情報(2016/11/13)
このブログで現在使っているテーマも自作しました。有料販売しています。Bootstrap使いつつ、ITっぽいデザインで仕上げました。SCSSも使っているので、なうい感じの開発かなと。テーマは1ヶ月のメールサポート付きの14ドルで販売しています。
» PayPalでテーマを購入する(14ドル:購入ページに進みます)

DLリンク

# 初期バージョン:かるいテーマ vl.0
# デモ:デモ

# SNSボタン&CSSスタイリング付きバージョン→かるいテーマ vl.2
# デモ:デモ

# 関連記事の表示機能追加:かるいテーマ vl.3
#デモ:デモ

テーマの特徴

  • かるい(パフォーマンスが高い)
  • シンプルなコード
  • SEO対策済
  • レスポンシブデザイン
  • ちょっとだけ開発者向け
  • WordPressのプラグインは使用不可

本当にはやいのか試してみた。

東洋経済オンラインの表示速度:8.538秒

touyou

BLOGOSの表示速度:19.187秒

blogos

バズ部の表示速度:6.395秒

bazubu

 

『かるいテーマ』の速度はどうでしょう…?

 

かるいテーマの表示速度:1.382秒

karui2

『かるいテーマ』はやい!!
medium_2523651888

『かるいテーマ』でできること

プラグインなしでのSEO対策

SEO対策にはAll in One SEO Packというプラグインが人気ですが、
かるいテーマではプラグインなしでもSEO対策ができるようになっています。

・メタディスクリプション、メタキーワードに関して
カスタムフィールドから設定できるようになっています。
具体的には以下の写真のとおりです。

seo

コードは以下のとおりとなっています。
※初期セットアップの際に『デフォルトワード』の部分を編集してください。

<?php if ( $post->my_description ): ?>
<meta name="description" content="<?php echo esc_attr( $post->my_description ); ?>" />
<?php else: ?>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<?php endif; ?>
<?php if ( $post->my_keywords ): ?>
<meta name="keywords" content="<?php echo esc_attr( $post->my_keywords ); ?>" />
<?php else: ?>
<meta name="keywords" content="デフォルトワード,デフォルトワード,デフォルトワード" />
<?php endif; ?>

OGP設定がラクラク

ヘッダーにFacebookとTwitterのOGP情報を記載しています。
コードは以下のとおりです。
※初期セットアップの際に、[ここを変更]と書かれている部分を修正してください。

<?php if (have_posts()): while(have_posts()):the_post(); endwhile; endif;?>
<meta property="[ここを変更 fb:app_id]" content="[ここを変更 your_fb_app_id]" />
<meta property="[ここを変更 fb:admins]" content="[ここを変更 your_fb_admin_id]" />
<?php if (is_single()) { ?>
<meta property="og:url" content="<?php the_permalink() ?>"/>
<meta property="og:title" content="<?php the_title(''); ?>" />
<meta property="og:description" content="<?php echo esc_attr( $post->my_description ); ?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); }?>" />
<?php } else { ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:type" content="website" /> <?php } ?>

<meta name="twitter:card" value="summary"/>
<meta name="twitter:site" value="[ここを変更 @hogehoge]" />
<meta name="twitter:creator" value="[ここを変更 @hogehoge]" />
<meta name="twitter:title" value="<?php the_title(''); ?>"/>
<meta name="twitter:description" value="<?php echo esc_attr( $post->my_description ); ?>"/>
<meta name="twitter:image" value="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); }?>" />

面倒な構造化マークアップが記述済み

SEO対策において構造化マークアップは大切です。
しかし、、、面倒ですよね…。

かるいテーマでは構造化マークアップが記載済みですので、なにもしなくてOKです。
「構造化マークアップってなに?」って人は以下の記事をどうぞ。
» schema.org(構造化マークアップ)の書き方・例の総まとめ【WordPress版】

コードにはわかりやすいコメント付き

WordPressテンプレートのコメントは英語が多いですよね…。
英語が得意なら問題ないですが、かるいテーマでは日本語でぎっしりコメントをいれていきました。
基本的なHTML/CSS/PHPの知識があれば簡単にカスタマイズできます。

かるいテーマが捨てた機能

『シンプルで早いテーマ』を目指した結果、以下の機能は削除することにしました。

  • プラグイン機能
  • コメント機能
  • ヴィジェット機能

詳細を順番にお話します。

プラグイン機能

プラグインはバグやサイトパフォーマンス低下の原因になることが多いです。
そこで、かるいテーマではプラグインを廃止しました。
プラグインを使わずに開発しましょう╭⁽˙͡˙̮ ⁾╮

コメント機能

アルファブロガーでもないかぎりコメントなんてつきませんよね。
なので実装していません。
ブログにお問い合わせフォームを設置すれば問題ないかと思います。

ヴィジェット機能

最近の記事や人気記事、アーカイブなどを掲載するときに使いますよね。
しかし、廃止しました。

デモサイトではサイドバーに『新規記事』、『人気記事』、『アーカイブ』がありますが、
新規記事一覧以外は手動でマークアップしています。
PHPよりもHTMLでの記述のほうがサイトパフォーマンスが上がるためです。
ヴィジェットは便利ですが、手動でマークアップで高速化を目指しましょう( ˘ω˘ )☝︎

以上となります。
アップデート情報はTwitterにて配信します。

番外編:たぶんよくある質問

「プラグインを使いたいんですけど…」

以下のコードをheader.phpに記述してください。
プラグインが利用可能になります。

<?php wp_head(); ?>

「アーカイブページのURL構造がわかりません…」

デフォルトでは以下のようになっています。

// 2014年11月の記事一覧を出力した場合
http://localhost/wordpress-test/?m=201411

「カテゴリーページのURL構造がわかりません…」

デフォルトでは以下のようになっています。

// 未分類のカテゴリーに属する記事を取得
http://localhost/wordpress-test/?cat=1

カテゴリーIDの確認方法は以下の記事からどうぞ。
» WordPress カテゴリー ID を確認する

追記:要望や相談に関して

もっとこういった機能がほしいとかありましたらお気軽にご相談ください。
お問い合わせフォーム or Twitterで受け付けます。

人気記事:映画を使って楽しく英語学習しましょう。

» 英語学習におすすめの映画10選|勉強法もあわせて解説