月: 2018年3月

Metro Magazineのカスタマイズ

Metro Magazineについて

一応、日本語も対応(独自部分は日本語にはなりません)のNewsやMagazine形式のテーマとなります。

写真を使ったプロダクトの紹介などにも適したテーマとなっていて、proバージョンを購入して機能アップもできます。

テーマのReadmeより

Metro Magazineは、インタラクティブな WordPress スタイルのウェブマガジンで、ニュース、新聞、雑誌、スポーツ、テクノロジー、グルメ、トラベル、ブログ、出版、ビジネス、その他様々な分野に適したテーマです。このテーマは、カスタマイザー(Customizer)上に構築されており、瞬時にプレビューを確認しながら、あなたのウェブサイトをカスタマイズできます。Metro Magazineには、カラースキームやカテゴリー毎に色を変える機能も含まれており、 クリック一つであなたのウェブサイトの色合いを変えることができます。このテーマでは、検索エンジン最適化(SEO)機能を使用しているため、Googleのランキングで上位にランク付けされやすいのも特徴です。他には、ソーシャルメディアとの統合、カスタム・ウィジェット、著者のプロフィール、ブレッドクラム、広告設定、カスタムCSS、トランスレーション・レディなど様々な機能があります。

ここでは、公式テーマで配布されている「License: GPLv2 or later」のものをカスタマイズして使用する一例を記載します。

子テーマの作成

子テーマの作成方法は、いろいろな方が丁寧に説明されているので、詳細は省略します。

functions.phpとstyle.cssを含む子テーマを作成します。

WordPressのインストールされた環境で、/wp-content/themesの下に子テーマのフォルダーを作成して、functions.phpとstyle.cssを置きます。

style.cssには最低以下の記載をします。

/*
Theme Name: 適当なアルファベットの名前
Template: metro-magazine
Description:
Author: 
Tags:
Version: 
*/

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'));
}

カスタマイズ準備が出来ましたので、いよいよカスタマイズ開始です。

子テーマを有効にして「外観ー>カスタマイズ」

子テーマの内容が正しい前提で、プレビュー表示ができれば、OKですが、ひょっとすると「リダイレクトの繰り返し……」とかでプレビュー表示に失敗するかもしれません。その場合は、functions.phpの最初に(<?phpの次の行)以下を追記します。

// リダイレクト繰り返し対策 おまじない
remove_action('template_redirect', 'redirect_canonical');

真の対策をする場合は、もっと深く調べてみる必要がありますが、とりあえずはこれでOK

カスタマイズのヒント

カスタマイズ画面の「プロバージョンの案内」は日本語の場合はみ出して見栄えも悪いので削除、footerのCopyrightのPowerd表示も削除しました。

カスタマイズ内容をズバリ書きにくい部分なので、ヒントだけ記載します。

手順としては、子テーマのfunctions.phpで、設定をしている部分の「add_action()」を「remove_action()」して、必要に応じて新たに異なるfunction名で再定義します。

ちなみに「プロバージョンの案内」は、

add_action( ‘customize_register’, ‘metro_magazine_sections_pro’ );

「Copyright」は、

add_action( ‘metro_magazine_footer’, ‘metro_magazine_footer_credit’, 40 );

子テーマを作成できる方なら、これだけのヒントで対応できると思います。

スライドショーの追加

スライドショーは、Wegit対応で使いやすいプラグイン「MetaSlider」を利用します。

直接、表示したい場所にスライドショーを組み込む方法もありますが、ここでは折角の子テーマですし、「Metro Magazine」はあらかじめhookが何か所か設置されていますので、サイドバーを作成して、ウィジェットでいろいろな使い道ができるようにします。

functions.phpに以下を追加します。関数名やサイドバー名は適当に変えられますが、function名には「_」は使えますが、「-」は使えませんので注意が必要です。(まぁ、エラーとなるので見逃しはないと思いますが…..)

function metro_child_widgets_init() {
register_sidebar( array(
'name' => __( 'トップスライドショー' , 'metro-child' ),
'id' => 'front-slide-widget',
'before_widget' => '<div id="%1$s" class="container">',
'after_widget' => '</div>',
'before_title' => '<aside>',
'after_title' => '</aside>',
) );
}
add_action('widgets_init','metro_child_widgets_init');
function metro_child_slider(){
if ( is_active_sidebar( 'front-slide-widget' ) ) : ?>
<div class="content-top">
<?php dynamic_sidebar( 'front-slide-widget' ); ?>
</div>
<?php endif;
}
add_action( 'metro_magazine_header', 'metro_child_slider', 51 );

これでウィジェットにトップスライドショーというサイドバーができます。

最後のadd_action( ‘metro_magazine_header’, ‘metro_child_slider’, 51 );の部分を表示させたい場所のhookに変更してください。

ちなみにhookは、親テーマの

/inc/template-hooks.php

などを見るとわかります。

TOPページのカテゴリー4の画像を変更

カテゴリー4の表示をしている部分をリムーブして、アドするのが綺麗と思いますが、ここではあまり変更しない前提で、子テーマにimageを置くようにします。

この部分は、CSSでバックグランド画像として表示させているので、子テーマのstyle.cssに以下を追記します。

.section-four .img-holder{
float: left;
width: 55%;
min-width: 400px ;
height: 885px;
background: url(images/A002.jpg) no-repeat center;
background-size: cover;
position: relative;
}

子テーマのフォルダーにimagesフォルダーを作成して、表示させたい画像を置きます。

表示サイズや、表示のさせ方は、必要に応じて変更します。

 

とりあえず、第1弾のカスタマイズはここまで