illustrated by いらすとや
当施設は、様々な「もの作り」を通して、利用者さんの社会復帰のお手伝いをしています。最近は作品も増え、当施設の見学者の方から作品の販売について尋ねられることもあります。そこで、将来的な作品販売を見据え、試しに Woocommerce を導入してみることにしました。今回は導入時の問題を備忘録として紹介します。
はじめに
当施設では、精神疾患の方やその可能性がある方などに対して、「もの作り」を通じたカウンセリングや社会復帰のお手伝いをしています。
当施設の利用者さんは、統合失調症やうつ病、躁うつ病の方、自閉症などの発達障害の方や診断名が付かない方など様々です。
利用者さんの中には、すぐにもの作りに興味を持って取り組む方もいれば、面倒くさがったり、「もの作り」に意味を見出せずに中々取り組まない方もいます。
しかし、当施設を最初に訪れる利用者さんの多くに、「もの作り」を行う意味などを脳機能に基づいた説明をしようとしても、中々聞き入れてはもらえません。
なぜなら、これはあくまでも経験則に基づきますが、一つは病気の影響で長時間の会話ができなかったり、話の内容を理解できなかったりすることがあります。
そして、もう一つは、脳の構造が非常に複雑で、馴染みがなく、いきなり脳の話をしても理解できないということが挙げられます。
当施設を見学に来られる方の中には、利用者さんの作品を見て、作品の販売について尋ねられる方もいます。
また、利用者さんの中にも、作品が販売されるのであれば、「もの作り」に対するモチベーションが上がるという方もいます。
色々な話を伺っていると、「もの作り」が脳機能の回復にどう関係しているかなどを最初に説明して「もの作り」に取り組んでもらうよりは、とりあえず作って売るために「もの作り」に取り組んでもらった方が良いのではないかと思いました。
では、どうやって販売するかを色々と考えて調べたところ、当サイトが利用しているWordpressのプラグインにECサイトを構築するためのプラグインがあることを知りました。
Wordpressで利用できるECサイトのプラグインは数多くあり、どれにするか非常に迷いました。
日本向けのECサイトならWelcartやWP-OliveCartがよく紹介されており、海外向けのECサイトならWoocommerceがよく紹介されています。
Woocommerceは海外サイトではダウンロード数が圧倒的に多く、無料のプラグインも豊富です。
とりあえず、ユーザー数が多いことから情報が集めやすい、無料のプラグインも多いので、何かできるのではないかと思い、Woocommerceを使ってみることにしました。
今回、Woocommerceを導入するにあたり、当サイトで使用しているテーマが未対応なので、対応させる必要がありました。
また、Woocommerceには専用のウィジェットがあり、ホームページやブログのサイドバーと併用するとサイドバーが煩雑になるので、Woocommerce専用のサイドバーを追加することにしました。
さらに、Woocommerceのショップページのタイトルを固定ページで変更しても、タブのタイトルが、「商品(Products)」、あるいは「商品 Archive(Products Archive)」となってしまうので、このタブのタイトルを修正する必要がありました。
この記事では、これらのことを可能にする方法を、備忘録として紹介しています。
Woocommerce 用の固定ページ作成
今までに当サイトで使用しているWordpressテーマは自作テーマとSimplicity2の二つで、どちらもWoocommerceに対応したテーマではありません。
このため、ショップページを表示するとページの体裁が崩れて内容がちゃんと表示されませんでした。
これは、woocommerce.phpがない場合、”archive-product.php”が表示されるからです。
ショップページを表示するには、Woocommerce用の固定ページを作成する必要があるため、以下のサイトを参考にしました。
Woocommerce用の固定ページを作成する方法としては、”woocommerce_content()”関数を使用する方法と”hooks”を使用する方法の二通りがあります。
hooksは自由度が高い反面、初心者には敷居が高いので、ここでは”woocommerce_content()”関数を使用する方法を紹介します。
woocommerce.phpの作成
“woocommerce_content()”関数を使用するには、まず、使用しているテーマのpage.phpを編集する必要があります。
基本的には、固定ページでループを実行するのに必要な関数部分を削除するだけです。
今回は例として、Simplicity2のpage.phpで説明します。
ループの開始部分は以下の通り、<article class=”article”>の前にあります。
<?php if ( have_posts() ) : while (have_posts()) : the_post(); ?>
そして、終了部分は以下の通りで、</article>の後にあります。
記事が見つからなかった場合の処理は必要ないので、この辺を全て削除します。
<?php endwhile; else : ?> ここには記事が見つからなかった場合の処理が記入されています。 <?php endif; ?>
ループ部分を削除したpage.phpは以下の通りです。
簡略化するために、headerとfooter部に書かれているウィジェットの関数も削除してあります。
必要に応じてウィジェットの関数を追加しましょう。
<?php
/*
Template Name: Woocommerce
*/
?>
<?php get_header(); ?>
<?php woocommerce_breadcrumb(); ?>
<article>
<header>
ここに必要な関数を追加
</header>
<div id="the-content" class="entry-content">
<?php woocommerce_content(); ?>
</div>
<footer>
ここに必要な関数を追加
</footer>
</article><!-- .article -->
<?php get_footer(); ?>
<article class=”article”>内のclass=”article”は、Simplicity2のスタイルシートが適用されるので削除しました。
条件分岐に使用できるように、プログラムの最初にTemplate Nameを追加しました。
page.phpでは、<div id=”the-content” class=”entry-content”><div>内に投稿内容が表示されるので、この間に”woocommerce_content()”を追加しました。
“woocommerce_breadcrumb()”関数はWoocommerceのパンくずリストを表示するために必要です。
page.phpの内容を編集したら、ファイル名をwoocommerce.phpに変更してテーマフォルダ直下に保存します。
Woocommerceのサポート宣言
woocommerce.phpを作成してショップページを表示出来るようにしても以下の図のようなメッセージが表示されます。
この表示を消すにはサポート宣言をする必要があります。
サポート宣言をするには、functions.phpに以下の内容のコードを追加するだけです。
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
add_theme_support( 'woocommerce' );
}
一度追加すると、それ以降は上記のコードを削除しても、表示されなくなるようです。
サイドバーの切り替え
当サイトは、ホームページとブログでサイドバーの内容をWidget Logicで変更するようにしてあります。
サイドバーに追加してあるウィジェットは、Googleサイト検索・新着記事・人気記事・カテゴリー・タグクラウド・最近のコメント・連絡先とマップの7つがどちらにも共通しています。
そして、ホームページでは営業日時を表示し、ブログでは広告用ウィジェットを表示するようにしてあります。
このため、現時点で使用しているウィジェットは8つになります。
この状態で、多数あるWoocommerce専用ウィジェットを追加すると、サイドバーが管理しにくくなると思いました。
また、Widget LogicでWoocommerceのページを条件分岐できるか試しましたが、この場合はサイドバーの内容を切り替えることができませんでした。
このため、現在のホームページとブログのサイドバー以外にWoocommerce用のサイドバーを追加することにしました。
ページ情報の取得
Woocommerceをインストールすると、ショップ・マイアカウント・カート・支払いが固定ページに登録されます。
そして、ショップページは上記で作成したwoocommerce.phpが基になっており、「テンプレート」を選択することができません。
逆に、マイアカウント・カート・支払いは、「テンプレート」を選択することができます。
そして、”is_page_template()”でファイル名を指定して条件分岐ができ、サイドバーの切り替えがしやすいです。
ところが、woocommerce.phpは”is_page_template()”でファイル名を指定しても条件分岐できませんでした。
そこで、以下のサイトを基にwoocommerce.phpから得られる値を調べてみることにしました。
値を取得するためにwoocommerce.phpに追加したコードは以下の通りです。
<?php
/* 主な投稿情報のセットアップ */
$ID = $post->ID; // 投稿ID
$page = get_page($ID); //
$title = $page->post_title; // タイトル
$content = $page->post_content; // 投稿内容
$slug = $page->post_name; // スラッグ
$parent = $page->post_parent; // 親投稿の有無
$uri = get_page_uri($ID);
/* 主な投稿情報の出力 */
echo("ID : " . $ID . "<br />\n"); // 投稿ID(ページID)
echo("title : " . $title . "<br />\n"); // タイトル
echo("content : " . $content . "<br />\n"); // コンテンツ
echo("slug : " . $slug . "<br />\n"); // ページスラッグ
echo("parent : " . $parent . "<br />\n"); // 親投稿の有無
echo("url : " . $uri); // URI
?>
ところが、woocommerce.phpでは、これらの情報を取得することができませんでした。
このため、woocommerce.phpから何らかのページ情報を取得し、その情報を基にサイドバー切り替えの条件分岐を行うという目論見が早くも崩れました。
とはいえ、woocommerce.phpを作成した際に、「Template Name」を追加しておいたので、これを条件分岐に使用することにしました。
親テーマファイルの変更
条件分岐の方法が決まったので、次は、親テーマのファイルの編集です。
サイドバーの切り替えをするために編集が必要なファイルは、Simplicity2の場合、widget-areas.phpとsidebar.phpの二つになります。
Woocommerce用のサイドバーは、widget-areas.phpで作成します。
元からあるサイドバーのコードをコピーしてその直下に張り付け、”name”と”id”を変更します。
変更した例を以下に記載します。
register_sidebars(1, array( 'name' => 'Woocommerce用サイドバーウイジェット', 'id' => 'sidebar-2', 'description' => 'Woocommerce用のサイドバーのウィジットエリアです。', 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget_title sidebar_widget_title">', 'after_title' => '</h3>', ));
便宜的に”Woocommerce用”と付けましたが、区別さえできれば、何でも良いと思います。
widget-areas.phpの編集はこれで終わりです。
次に、追加したサイドバーの表示を切り替えるための条件分岐を追加します。
条件分岐を行っているファイルは、sidebar.phpなので、このファイルを編集します。
編集内容は、以下の通りです。
<?php // テンプレート名の取得
global $template;
$template_name = basename($template, '.php');
?>
<?php
if (!is_page_template('woocommerce-page.php') && $template_name != "woocommerce") {
if ( is_active_sidebar( 'sidebar-1' )) {
dynamic_sidebar( 'sidebar-1' );
}
}
?>
<?php
if (is_page_template('woocommerce-page.php') || $template_name == "woocommerce") {
if ( is_active_sidebar( 'sidebar-2' )) {
dynamic_sidebar( 'sidebar-2' );
}
}
?>
最初に、まずファイルのTemplate Nameを取得し、変数$template_nameに代入します。
あとは、代入された変数がwoocommerce.phpであるか、is_page_template()関数でwoocommerce-page.phpであれば、Woocommerce用のサイドバーが表示され、通常のサイドバーは非表示になります。
あとで判明したことですが、Woocommerceには専用の関数があります。
このため、上記の方法以外でも、ショップページなら”is_shop()”関数で、商品ページなら”is_product”関数を用いることで条件分岐が可能です。
ただ、この場合、商品カテゴリーや商品タグ、あるいはその他のWoocommerce関連ページの関数も付け加える必要がありそうです。
そうすると、if文がかなり長くなりそうな気が…。
むしろサイドバーの大まかな条件分岐は上記の方法で行い、細かい条件分岐はWidget Logicで行うほうが良さそうです。
Woocommerceの関数は以下のサイトを参考にすると良いでしょう。
ショップページのタブのタイトルを変更する
Woocommerceをインストールすると、固定ページに「ショップ」が追加されます。
この「ショップ」がWoocommerceのショップページで、商品リストが表示されます。
ショップページは、固定ページと同様に、ページタイトルやパーマリンクを変更することができます。
デフォルト設定では、ページタイトルが「ショップ」で、パーマリンクが「shop」になっています。
私としては、このデフォルト設定を変える必要があったので、ページタイトルとパーマリンクをそれぞれ、「作品紹介」と「artworks」に変更することにしました。
ページタイトルの見出し1(作品紹介)とパーマリンク(artworks)は変更したとおりになりました。
ところが、ブラウザのタブに表示されるページタイトルを見ると、「商品」になっており、見出し1と異なることに気付きました。
そこで、このショップページのタブに表示されるタイトルを変更する方法を調べてみると、今回の問題に一致する記事を見つけることができました。
ところが、この記事には、初心者が自己解決できるような、具体的な解決策は書かれていませんでした。
漠然とではありますが、functions.phpで”remove_theme_support( ‘title-tag’ ); “を使用したことと、子テーマのheader.phpで条件分岐を行ったことぐらいでした。
とりあえず、条件分岐を利用するために、ショップページから条件分岐に使えそうな方法がないか試してみることにしました。
まず、ショップページは固定ページなので、属性にある「テンプレート」でphpファイルを選択できないかを試しました。
なぜなら、is_page_template()関数でファイル名を取得できるため、ファイル名「woocommerce.php」を取得して条件分岐に利用しようとしたからです。
しかし、固定ページの属性に「テンプレート」がないため、テンプレートを変更することができず、ファイル名を取得できませんでした。
条件分岐に利用できそうな情報を取得できなかったため、他の方法で調べてみたところ、二つの方法が分かりました。
以下にその二つの方法を紹介します。
functions.phpの編集
一つ目の方法は、以下のサイトを参考にしました。
functions.phpに以下のコードを追加し、”My Title”を任意のページタイトルに変更するだけです。
/**
* Change the Shop archive page title.
* @param string $title
* @return string
*/
function wc_custom_shop_archive_title( $title ) {
if ( is_shop() && isset( $title['title'] ) ) {
$title['title'] = 'My Title';
}
return $title;
}
add_filter( 'document_title_parts', 'wc_custom_shop_archive_title' );
例えば、当サイトの場合、ショップページのページタイトルを”作品紹介”にしたい場合、”My Tytle”を”作品紹介”に変更します。
この方法で、無事、ショップページのタブのタイトルを変更することができました。
しかし、喜びも束の間、編集したfunctions.phpをレンタルサーバーにアップロードしましたが、タイトルが変更されることがありませんでした。
実は、この原因にはYoast SEOが関係していました。
Yoast SEOをインストールしている場合
通常であれば、上記のコードをfunctions.phpに追加すると、ショップページのタブのタイトルが「商品」から指定したタイトルに変更されます。
しかし、SEO対策として、Yoast SEOがインストールされている場合、タブに表示されるページのタイトルにArchiveが追加されるため、上記のコードが上手く機能しないようです。
このArchiveが追加される原因には、Yoast SEOが関係していました。
Yoast SEOの設定で「Titles & Meta」を確認すると、以下のようにArchiveがあることが分かります。
%%pt_plural%% Archive %%page%% %%sep%% %%sitename%%
実は、Yoast SEOにはWoocommerceに対応した設定があり、Woocommerceが有効化されると、この設定も有効化されます。
この結果として、上記のfunctions.phpを編集してもページのタイトルに反映されることはありません。
Yoast SEOの公式ページでも、以下のようにWoocommerceのショップページのタイトルについて説明がありました。
まさか、Yoast SEOが関係しているなんて予想もしませんでした。
ですが、実は、Yoast SEOがインストールされていると、この問題は簡単に解決するんですよね。
方法は、まずWordpressの右メニューの「SEO」にある「Titles & Meta」をクリックします。
次に表示されるページにある「Post Types」タブを選択し、「Custom Post Type Archives」のTitleを変更するだけです。
今回の場合、ショップページのタブのタイトルを「作品紹介」にしたいので、以下のように変更しました。
作品紹介 %%page%% %%sep%% %%sitename%%
この場合、上記で説明したようなfunctions.phpの編集は必要ありません。
Yoast SEOは、英語基準ではありますが、記事を書く際にSEO的にどうかを判定してくれます。
もしインストールされていない方は、これを機にインストールしてみるのも良いかもしれません。
最後に
Woocommerceを導入するにあたり、色々な問題が生じました。
まず、ショップページ用のwoocommerce.phpに合うように、Simplicity2のpage.phpを編集しなければいけませんでした。
page.phpの編集にあたってはどのコードが必要かあるいは不必要かを試行錯誤しました。
また、Woocommerceサポート宣言のメッセージが表示されるので、これを非表示にする方法を調べたりしました。
当サイトはホームページとブログの二つに分かれていたサイトを一つのサイトに併合するためにWordpressを導入しました。
そして、WordpressでECサイトが構築できることを知り、今度はECサイトを追加しようとしたので、サイドバーが煩雑になってしまいました。
そこで、ホームページやブログとは別に、ECサイト用のサイドバーを追加することにしました。
このため、Simplicity2の子テーマの編集だけでなく、親テーマの編集が必要になってしまいました。
一応、woocommerce.phpにTemplate Nameを追加することで、サイドバーの条件分岐をすることができました。
一番厄介だったのは、ショップページのタブに表示されるタイトルの変更でした。
この問題を解決するために、日本語サイトだけでなく、海外サイトでも情報を集める必要がありました。
幸いなことに、この問題を解決するためのサイトを見つけることができ、Yoast SEOが関係していることも分かりました。
当然のことながら、Woocommerceを導入したからと言って、当施設の利用者さんの作品がすぐに売れることはないでしょう。
目的としては、販売するということを前提に「もの作り」へのモチベーションを高めるということがあります。
また、販売することを目的とすることで、積極的に「もの作り」に対して試行錯誤してもらうということもあります。
場合によっては、買い手側の立場に立つことで、社会においての自分の在り方や、共感性を身に付けることができればという期待もあります。
そして、もし作った作品が販売に繋がれば、それが社会との接点に繋がるのではないかと思います。
将来的には、ここで紹介した内容を当施設の利用者さんが自分でできるようになって、ホームページやブログ、ECサイトの運営をできるようになれば良いなと思います。
コメント