Wordpress（ワードプレス）おすすめの無料ブログテーマ「Revenue」

WordPress（ワードプレス）で利用するおすすめの無料テーマ「Revenue」を紹介します。

Revenueテーマは、個人ブログなどのネタを更新していくブログに向いているワードプレステーマです。

「Revenue」の主なポイントは下記の通りです。

レスポンシブ・モバイルフレンドリー

スマホなどのモバイル対応テーマなので、PCサイト、タブレット、スマホなどのデバイスやブラウザーに対して、表示を最適化してくれます。

ローカリゼーション

テーマは複数の言語に対応しているので、任意の言語でサイト構築ができます。

テーマカスタマイザー

テーマカスタマイザーを使用して、テーマの設定などを微調整しながら、リアルタイムで確認できます。
無料で設定できる項目は、5つです。

テーマ設定
・ロゴ、ファビコン
・サイトレイアウト
・ヘッダーサーチフォーム
・ピックアップコンテンツの表示非表示
・一覧に表示するコンテンツ文字数
・アイキャッチ画像の表示非表示
・フッターウィジェットの表示非表示
背景画像
メニュー
・メニュー新規作成・表示位置
ウィジェット
・サイドバー
・フッター4つ
追加CSS

ページ読み込み速度最適化

Revenueは、ページの読み込み速度が非常に速い軽量のワードプレステーマです。開発元で各機能の速度がテストされており、ロードを最適することでユーザーエクスペリエンスを向上させています。

検索エンジン最適化（SEO）

開発元によると、Revenueは、SEOの設計と開発が最優先事項のテーマとのこと。そのためhタグや構造などの基本的なSEOは備わっています。

無料と有料の違い

Revenueには、有料版（39ドル）もあります。無料版では、使えず有料版で使える機能には下記のものがあります。

無制限のテーマカラーオプション
Googleフォントオプション
スティッキーナビゲーションメニュー
ピックアップコンテンツの数（無制限）
投稿一覧のレイアウトスタイル（ブログ・グリッド・リスト）
投稿記事のパンくずリスト
単一の投稿でのソーシャルシェア
投稿メタの作成者アバター
単一の投稿に関する関連記事
単一投稿の著者情報ボックス
ニュースレター購読ウィジェット
広告ウィジェット
ソーシャルウィジェット
人気の投稿サムネイルウィジェット
最近の投稿サムネイルウィジェット
最も閲覧された投稿のサムネイルウィジェット
ランダム投稿サムネイルウィジェット
サイトフッターの「トップに戻る」ボタン
フッターテキスト・著作権エディター
テーマのサポート
テーマデモコンテンツ

無料を使いこなす場合

有料を購入せずに無料を使いこなす場合は、ある程度のテーマ修正が必要になります。

無料で使えなくて困る機能は、主に下記の3項目です。

投稿記事のパンくずリスト
「トップに戻る」ボタン
フッターテキスト・著作権エディター

また、テーマを修正するにあたって、親テーマが更新されてテーマをアップデートした時に修正がなくならないように、子テーマ化しておいた方が便利です。

Revenueの子テーマ作成

まずは、子テーマを作成して親テーマが更新されても大丈夫なようにしておきます。以下、子テーマの作り方です。

「revenue」と同じディレクトリに「revenue-child」というフォルダ（子テーマフォルダ）を作成します。

そのフォルダの中に「style.css」を作成して、下記のコードを記載します。

/*
Theme Name: revenue child
Template: revenue
*/

続いて子テーマフォルダに「functions.php」を作成して下記のコードを記載します。

<?php
/**
 * Child theme functions
 *
 * When using a child theme (see http://codex.wordpress.org/Theme_Development
 * and http://codex.wordpress.org/Child_Themes), you can override certain
 * functions (those wrapped in a function_exists() call) by defining them first
 * in your child theme's functions.php file. The child theme's functions.php
 * file is included before the parent theme's file, so the child theme
 * functions would be used.
 *
 * Text Domain: revenue-child
 * @link http://codex.wordpress.org/Plugin_API
 *
 */

/**
 * Load the parent style.css file
 *
 * @link http://codex.wordpress.org/Child_Themes
 */
function revenue_child_enqueue_parent_style() {
	// parent stylesheet
	wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'revenue_child_enqueue_parent_style');

外観からテーマを子テーマに変更して問題ないか確認しましょう。

投稿記事のパンくずリスト

次に実際の子テーマでのファイル更新を行っていきます。

まず、パンくずリストを作成します。自作でも可能ですが今回は「Breadcrumb NavXT」プラグインを使って設定していきます。

プラグインをインストールして、左メニューの「設定」＞「Breadcrumb NavXT」を選択して設定画面を表示します。

まず、一般タブに移動して、「ホームページテンプレート」のHTMLにある「%htitle%」を「<i class="fa fa-home" aria-hidden="true"></i>」に書き換えます。

パンくずリストのホームの部分に「Font Awesome」のアイコンを利用しているのでプラグインのインストールが必要です。

同じように必要な場所を変更していきます。

一般タブの「メインサイトのホームページテンプレート」。
投稿タイプタブの「投稿テンプレート」、「ページテンプレート」、「メディアテンプレート」。
その他タブの「投稿者テンプレート」、「日付テンプレート」、「検索テンプレート」を同様に変更します。

次に、親テーマフォルダから子テーマに「header.php」をコピーして、ファイルの一番最後に下記のコードを追記します。

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
<?php 
if(!is_home() && !is_front_page()) {
  if(function_exists('bcn_display')) {
    bcn_display();
  }
}
?>
</div>

パンくずリストのスタイルをCSSで整えます。
子テーマを作る時に作成した「style.css」に下記のCSSを追記します。

.breadcrumbs {
   background-color: inherit;
   border-bottom: none;
   padding-bottom: 0;
   position: relative;
   margin-bottom: 15px;
   font-size: 0.9rem;
}

これでパンくずリストを表示できるようになります。サイトトップではパンくずリストは表示されないようになっています。

「トップに戻る」ボタン

下のほうまでスクロールした時に、「トップに戻る」ためのボタンがないので、jQuery利用したjsでボタンを作成します。

ボタンの仕様は、下にスクロールしていくと矢印ボタンが表示されて、ボタンをクリックして上にスクロールして戻ると消えます。

消えたり、動いたりといった部分をjsで作成します。
作成したファイルは、ファイル名「pageup.js」で保存し、子テーマの中に「js」フォルダを作成してその中にアップします。

jQuery( document ).ready( function( $ ) {

  var pagetop = $('#page_top');
  pagetop.hide();
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
      pagetop.fadeIn();
    } else {
      pagetop.fadeOut();
    }
  });
  pagetop.click(function () {
    $('body,html').animate({
      scrollTop: 0
    }, 500);
    return false;
  });

});

続いてボタンの表示をCSSで整えます。CSSでは「Font Awesome」のアイコンを利用しているのでプラグインのインストールが必要です。

下記のCSSを子テーマを作成するときに新規作成した「style.css」に記載します。

#page_top{
  width:50px;
  height:50px;
  position:fixed;
  right:0;
  bottom:0;
  background:#2baae1;
  opacity:0.6;
}
#page_top a{
  position:relative;
  display:block;
  width:50px;
  height:50px;
  text-decoration:none;
}
#page_top a::before{
  font-family:'Font Awesome 5 Free';
  font-weight:900;
  content:'\f0d8';
  font-size:25px;
  color:#fff;
  position:absolute;
  width:25px;
  height:25px;
  top:0;
  bottom:0;
  right:0;
  left:0;
  margin:auto;
  text-align:center;
}

ボタンとなるHTMLを追加します。
親テーマフォルダから子テーマに「footer.php」をコピーして、wp_footer();の前に下記のhtmlを追記します。

<div id="page_top"><a href="#"></a></div>

最後に「functions.php」にトップに戻るjsを読み込ませるための関数とアクションフックを追記します。

function custom_scripts() {
  $handle = 'script-pagetop';
  wp_enqueue_script($handle, get_stylesheet_directory_uri().'/js/pageup.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );

これでページトップへ戻るの作成は官僚です。

フッターテキスト・著作権エディター

フッターのコピーライトにダウンロード元サイトの記載がある場合の対応方法です。

トップへ戻るボタン作成時に使った「footer.php」を編集します。ファイルを開いてコピーライトの部分を下記のコードに書き換えれば完了です。

&copy; <?php echo date("o"); ?> <a href="<?php echo home_url(); ?>"><?php echo get_bloginfo('name'); ?></a>

まとめ

Revenueテーマを無料でつかってカスタマイズする方法を紹介しました。

無料でもプラグインなどを利用すれば、使えるテンプレートにすることができますが手間がかかります。

有料版では、新着や関連投稿表示などもできるので、39ドルであれば購入してもよいかもしれません。

Revenueの無料テーマは下記の参考URLからダウントードできます。

参考：just free themes（Revenue）

WordPress（ワードプレス）おすすめの無料ブログテーマ「Revenue」