TCDテーマオプションで、保存ができなくなった場合の対処方法

TCDテーマオプションで保存を押した時

「データを保存する事ができませんでした。もう一度お試しください。」

と、表示された時の対処方法です。

プラグイン「wordfence」の学習モードを再開させる

エラーが出る原因はwordfenceのファイアーウォールです。

学習モードを再開させて、こちらの更新の内容を学習させましょう。

英語の迷惑メールがcontactform7経由でやってくる！

くまさん

ドメインもコロコロ変わるのでフィルターできない！

wordpressで構築したサイトのメールフォームといえば「contactform7」。
ところがこれ経由で英文の迷惑メールがどんどこ送られてくる！メールサーバーでドメインでフィルターかけようにも、ドメインも変わるしGmail経由だったらドメイン禁止もできない！

こんな時に、「コメント欄に日本語が含まれていないとエラーが出て送信できない」処理を加える方法をご説明します。

fanction.phpに以下をコピペで足すだけ！

//メールフォームの textarea にひらがなが無ければ送信できない（contact form7）
add_filter('wpcf7_validate_textarea', 'wpcf7_validation_textarea_hiragana', 10, 2);
add_filter('wpcf7_validate_textarea*', 'wpcf7_validation_textarea_hiragana', 10, 2);

function wpcf7_validation_textarea_hiragana($result, $tag)
{
    $name = $tag['name'];
    $value = (isset($_POST[$name])) ? (string) $_POST[$name] : '';

    if ($value !== '' && !preg_match('/[ぁ-ん]/u', $value)) {
        $result['valid'] = false;
        $result['reason'] = array($name => 'エラー / この内容は送信できません。');
    }

    return $result;
}

以上です！

こちらのブログを参考にさせていただきました。ありがとうございます！

Contact Form 7 海外からのスパム対策！お問い合わせ本文が全て外国語の場合は送信できないようにする

WordPress ブログを運営していると必ずといってよいほど発生する「お問い合わせからの英語等のスパムメール」。今回は「Contact Form7 を用いたお問い合わせフォームから送信される外国語メールだけをピンポイントでシャットアウトする方法」を紹介します。

tanweb.net

TCDのアイコンフォントでLINEを追加する方法

この記事は2020年5月19日に加筆・修正しました。

くまさん

アイコンフォント、LINEがないじゃないか！

TCDのテーマの管理画面から選べるソーシャルアイコン。その一覧にLINEがないじゃないですか。もしかしたら入ってるんじゃないかと思い探したらありました！
忘備録として実装の方法を書いておきます。

WordPressテーマ「HEAL (tcd077)」でLINEアイコンを追加

テーマフォルダの中にあるフォルダを確認

「wp-content」＞「themes」＞「heal_tcd077」＞「css」＞「sns-botton.css」

この中のコード

@charset "UTF-8";


/* ----------------------- Share button -------------------------- */


@font-face {
    font-family: 'design_plus';
    src: url('../fonts/design_plus.eot?v=1.5');
    src: url('../fonts/design_plus.eot?v=1.5#iefix') format('embedded-opentype'),
         url('../fonts/design_plus.woff?v=1.5') format('woff'),
         url('../fonts/design_plus.ttf?v=1.5') format('truetype'),
         url('../fonts/design_plus.svg?v=1.5#design_plus') format('svg');
    font-weight: normal;
    font-style: normal;
}


[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "design_plus" !important;
  line-height: 1; font-style: normal; font-variant: normal; font-weight: normal; speak: none; text-transform: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.icon-feedly:before { content: "\e907"; }
.icon-hatebu:before { content: "\e908"; }
.icon-line:before { content: "\e909"; }
.icon-pocket:before { content: "\e90a"; }
.icon-google-plus:before { content: "\e900"; }
.icon-google-plus2:before { content: "\e901"; }
.icon-facebook:before { content: "\e902"; }
.icon-facebook2:before { content: "\e903"; }
.icon-twitter:before { content: "\e904"; }
.icon-rss:before { content: "\e90b"; }
.icon-rss2:before { content: "\e906"; }
.icon-pinterest:before { content: "\e905"; }

くまさん

ありましたね〜！管理画面に出てないだけで一通りのソーシャルアイコンが揃っています。
なんでディフォルトでLINE無いんでしょうか？

CSSを追加

以下のCSSを追加します。

#header_social_link li.line a:before { content:'\e909'; }

HTMLで使わないソーシャルと入れ替え

<?php if($pinterest) { ?><li class="line"><a href="<?php echo esc_url($pinterest); ?>" rel="nofollow" target="_blank" title="Line"><span>Line</span></a></li><?php }; ?>

はい。ピンタレストは使わないので入れ替えました。

これでバックエンドを触らないでアイコンのみ、ピンタレストを選んだらLINEにできました。

シェアボタンに「LINEで送る」ボタンを追加

ここからはテーマ「oops！」の使用事例です。

記事のシェアボタンに「LINEで送る」がありません。これを追加してみます。

使わない「Pocket」ボタンと入れ替え

「template-parts」ディレクトリ内の「sns-btn-top.php」と「sns-btn-btm.php」の155行目あたりにに以下のコードがあります。

			    <li class="c-share__btn c-share__btn--pocket">
			    	<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" target="_blank">
			      	<i class="c-share__icn c-share__icn--pocket"></i>
			        <span class="c-share__title">LINE</span>
			      </a>
			    </li>

ここの「http://getpocket.com/edit?url=」をLINEで送るボタンのコード「https://social-plugins.line.me/lineit/share?url=」と入れ替えます。
さらに「<span class=”c-share__title”>pocket</span>」のpocketを「LINE」と打ち替えてあげます。

次に、「style.css」内の

.c-share--mono .c-share__btn--pocket a:hover { background-color: #ee4056; }

の「background-color: #ee4056;」をLINEのカラー「#00b900」にしてあげます。

で、以下のコードをCSSに追記します。

	.c-share__icn--pocket::before { content: "\e909"; }

これで、シェアボタンにpocketを表示するとLINEで送るボタンが現れます。

TCDのGooglemap APIで住所入力したらマーカーがずれた

くまさん

住所の入力欄に住所入れたらずれた！

TCDのテーマの管理画面から設定する「Googlemap API」。その住所入力欄に住所を入れたらマーカーがずれてしまった場合の対処法です。

ややこしいAPIの設定はこちら

まずはここでつまずきまくっている人が多いので、TCDのこちらの記事を参考にしてください。

https://design-plus1.com/tcd-w/2018/08/google-maps-platform-api.html

design-plus1.com

くまさん

特に最後の動画が非常にわかりやすいです。

住所入力欄に住所を入れたらずれる

住所の入力欄があるから普通に住所を入れるじゃ無いですか？

例えばうちの住所「京都府南丹市日吉町胡麻大戸15-1」と入力すると、見事に家と違う場所にマーカーがつきます。

考えてみたら当然で、番地までしか指定しないのに正確に建物の位置を指定することは、よほど大きな建物以外は無理ですよね。

くまさん

うちの顧客はそんなビル持ちそうそういません。

緯度経度情報を入力して解決！

以下のサイトで、住所を入力して緯度・経度を取得してあげると正しい値が取れる。

http://www.geocoding.jp/

www.geocoding.jp

「住所やランドマーク名」のところに入力

はい！出ました。そして・・・

上記画像のブルーに反転している箇所「8Q7Q5FRJ+GR」を住所の入力欄に入れてください。

くまさん

これで正確な位置にマーカーをセットすることができます！
普通はここまで教えないとダメでしょうTCDさん。

ヘテムルの無料SSLの設定方法と注意点

くまさん

ヘテムルユーザーは必見です。

今や一般的になった無料SSLサーバー証明書「Let’s Encrypt」。ヘテムルでこれを設定しようとするとかなりのつまずきポイントがあります。今回は忘備録としてまとめてみました。

まずはヘテムルサーバーの現状確認。

まず大きな前提条件として、サーバー番号が「usersXXX」の新サーバー環境のアカウントでのみ設定可能なこと。まずここでつまずく人が多いです。
※上記画像の右上「Webサーバ：users018」の部分。

古くからヘテムルを利用しているユーザーの場合、「ftpXXX」のアカウントになっていると思います。要するに、新システムのサーバーに自分で移し替えない限り、無料SSLが使えないということです。

くまさん

まずここがめっちゃ不親切！

移設の機能は用意されていますが、読んでもわかりにくいところが多いと思います。
一番心配なのが、ちゃんと表示されるか、設定を自分で変更する部分はどこなのかではないでしょうか。

マニュアルから抜粋してご説明します。

ヘテムルドメイン、共用 SSL URL

ヘテムルドメイン、共用 SSLの URL が変わります。リンクなどに利用中の場合、URL の変更が必要です。特に共用 SSL はお問い合わせフォームや登録フォームで利用しておられないかご確認をお願いいたします。

現在：https://○○○○○.heteml.jp/→ 移設後：https://○○○○○.heteml.net/

供用のSSLを使用している人は、自分でリンク先を変更する必要があります。

FTP、SSH のホスト名（サーバー名）

移設先サーバーではFTP、SSHのホスト名（サーバー名）が変更となります。
コントロールパネル右上にある［ サーバー操作切替 ］ボタンで移設元と移設先のコントロールパネル表示を切り替えていただき、「FTPアカウント」「SSHアカウント」で情報をご確認ください。
移設先のサーバーへFTP、SSH接続いただく場合、ご利用ソフトで移設先のアカウント情報を設定ください。

FTP接続する場合のアカウント設定が変更になります。FTPソフトでの設定を手動で変更してください。

PHP について

新サーバー環境では PHP5.3 / PHP5.4 の提供がございません。
また、新サーバー環境での PHP のバージョン指定については移設先のコントロールパネル【 PHP設定 】で各ドメイン毎に行ってください。
なお、移設先での PHP 初期設定は PHP 7.3（モジュール版）です。
ただし、.htaccess でのバージョン指定の記述がある場合、コントロールパネル【 PHP設定 】での設定よりも優先されます。
.htaccess ファイルで「AddHandler php5.×-script .php」によるバージョン指定を行っておられる場合、.htaccess での記述を削除いただき、コントロールパネルでの上記指定をお願いします。
.htaccess でのバージョン指定記述を確認いただく場合、以下ブログのご案内もご活用いただけますと幸いです。

PHP バージョン指定記述のある .htaccess の確認方法
拡張子 .html で PHP を動作いただく場合の記述にもPHP のバージョン指定が含まれています。ご利用中の場合は併せてご確認ください。

古いバージョンのPHPで動作しているWordPressでサイトを運用している場合、サイトが死にます。サイトのバックアップをとって、新サーバー移行前にPHPバージョンを最新にアップして動作を検証しましょう。

データベース（MySQL）について

MySQL 4
新サーバー環境ではご利用いただけません。そのため、MySQL 5.6 のデータベースへ手動でデータ移設をお願いします。
個別に手動でデータベースをデータ移設いただいた場合、データベース情報が変更になります。サイトで参照するデータベース情報の変更を併せて実施ください。

データベースの移行方法
簡単インストールを行ったCMSでDBの情報が記載してあるファイルの場所
MySQL 5
データベースで新サーバー環境から接続ができないものがございます。コントロールパネル【データベース】にてパスワード再設定の項目が「要設定」とリンクが表示されている場合、以下ページをご確認の上、接続できるようご対応ください。

これもPHPバージョンと同じく、新環境で動作しなくなるので事前に移設が必要です。

くまさん

正直言って、上記の内容が引っかかりそうな場合は、無理に旧サイトを移行させずにWordPressのバージョンアップとサイトのリニューアルを合わせて行った方が良いです。

無料独自SSLの設定方法と注意点

ではここから、ヘテムルでの無料SSLの設定を説明していきます。
公式のマニュアルには載っていないつまずきポイントも紹介しますね。

1. コントロールパネルから、［ ドメイン・メール設定 ］へ進む。

2. ドメイン一覧において無料独自SSLを設定したい独自ドメインの［ 詳細を見る ］を押す。

なお、ヘテムルのサブドメイン について独自SSLを設定いただけないため、暗号化対応いただく場合は共用SSLをご利用ください。

くまさん

注意ポイント1
ここがヘテムルの弱い所！サブドメインに無料SSLを設定できません。仕様上そうなのでどうしようもありませんが、Xサーバーではサブドメインにも無料SSLが設定できます。これだけでもヘテムル引越し案件ですね😭

3.［ 設定変更 ］ボタンをクリック

上記の3ですが、有料の独自SSLを利用している場合、なんと設定変更ボタンが押せません！

このサイトの作り自体がおかしいと思うのですが、「設定変更」ボタンの上に「設定変更」ボタンが画像で配置されています。有料SSLを契約していると気は「押せる」設定変更ボタンが表示されず、「押せない」設定変更ボタンが表示されます。

その説明がどこにも書いていないので、有料SSLを契約中の人は無料SSLに移行することができません。

くまさん

非常にわかりにくく不親切！！！
結局、有料SSLを利用している人は契約が切れるまで待つしかありません。その説明必要でしょ？！

4.［ 無料独自SSLを設定する ］にチェックを入れ、変更するボタンを押す

くまさん

公開フォルダが変更されないように注意してください。念のためにFTPでご確認を！

5.［ OK ］ボタンをクリックし、設定の反映を待つ

※ 反映完了までに5分程度がかかります。操作完了後の表示

6. ドメイン一覧で［ SSL設定中 ］の表示が［ 無料SSL ］になったら完了

これが

これに。

仕様上仕方ないかもしれませんが、有料SSLを利用していた場合、物理的に契約切れになった後でしか無料SSLに変更できません。ということは、DNSの浸透のタイムラグでSSLが切れた状態が1日程度発生します。

また、WordPressの原因不明のエラーが発生することもあります。

私の場合はしようしているテーマによってはトップページ（index.php）と管理画面のログインページ（wp-login.php）が、PCからアクセスした場合ソースファイルがダウンロードされてしまうという謎の現象に悩まされました。

Googleで検索しても症例を解説したページはないですし、私がヘテムルサーバーで2回有料SSLから無料SSLに変更した時に同じ症状が出ましたので、ヘテムル独自のエラーではないでしょうか。

くまさん

ちなみに散々解決方法を調べてコードもいじり倒しましたが解決せず。結局諦めて寝たら次の日には治っていたのでサーバーの仕様なのか。。。

痒いところに手が届かないヘテムル！！

旧サーバーから新サーバーへのユーザーサイドでの乗り換えが必要、サブドメインに無料SSLを設定できない、有料からの乗り換えが大変、などなど不親切なところが多いヘテムル無料SSL。

くまさん

これをみて邪魔臭い、わからん！と思ったら別サーバーに引っ越しましょう！おすすめはXサーバーです！！！

wordpressによるコーポレートサイトを作ろう！

くまさん

僕のwordpressによるコーポレートサイトの作り方を伝授します！

プロフィールを見ていただければわかりますが、僕はwebもやるデザイナーです。とはいえ最近の案件の中心はwebサイト構築が多く、そのほとんどがwordpressを利用したコーポレート（会社）サイトの構築です。

今回は、「wordpressを利用してテーマをカスタマイズして納品する」という実際にあった案件を通して、個人事務所のweb制作においてどういう風にwordpressによるコーポレートサイトが完成するのかを実録で紹介しようと思います。

具体的な作業について挙げていきますので、wordpressのテーマのカスタマイズ方法などで参考になると思います。ぜひご覧ください！

個人事務所によるweb制作の実例を通して wordpressでのコーポレートサイト構築を見てみよう！

大きなデザイン事務所だとチームに分かれて制作する現場が多いですが、僕のような個人事務所の場合は、「営業、マネジメント、企画」は奥さん、「制作、プログラム」は僕、「写真撮影」はカメラマンの友人、「写真加工」はデザイナーの友人、という具合にミニマムで行っています。

きのこ

チームGOMA（ゴーマ）と名乗っています。

では、今回の案件でどう言った作業を行ったかを、wordpressのカスタマイズ作業をメインにご説明します。

クライアントからの発注

今回のクライアント様はデザイン事務所。Aデザイン様と仮にしますね。

Aデザイン事務所はデザインのみでweb制作は行っていません。Aデザイン事務所が企業のホームページ制作案件を受注して、デザインは行い、webの構築部分はGOMA（僕の事務所）に発注しています。

もちろん、GOMAで直接企業から案件を受注することも多いですが、このようにGOMAへ仕事を任せてくださるクライアント様もあり大変嬉しく感謝しております😀

作業内容

今回のリクエストはコスト削減のためにwordpressのテーマを利用し、それをカスタマイズしての納品です。

サーバーは先方が用意したAWS（アマゾンウェブサービス）を利用し、テーマをインストールされた状態からのスタートです。

記事を書くのは企業の方ができますので、僕はクライアントであるデザイナーさんの理想をサイトに反映させるのがミッションとなります。

GOMAでのweb案件の実例

wordpressのテーマ、特に僕が感心するのが「TCD（株式会社デザインプラス）」のテーマです。

元からデザインがきっちりしてて、レスポンシブにも対応。管理画面も使いやすい。

昔はサイトを作る時基礎設計から全部やってたのですが、そのせいもありコストが大幅にかかっていました。でも現在は、基礎設計とデザインをテーマにすることにより大幅にコスト削減ができるようになりました。

余談ですが、僕がweb制作を始めた2000年代前半は、20年後は全ての人がキーボードとマウスを駆使してパソコンを使いこなす時代になると考えていました。

ところが、スマホの台頭で今や家にパソコンがない家庭も当たり前、若い世代はワードやエクセルはおろかキーボードすら触ったことがない子も多く、パソコンは本当に開発者のためのものになっちゃいました。

くまさん

今やスマホがアクセスの過半数をはるかに超える現実。
時代は変わりました。

クライアントのリクエスト

話を戻して今回の作業から、今回ご紹介する内容を抜粋しました。
（本当はもっと作業があります）

もちろん作業の前には「子テーマ」を設定しています。子テーマについてはこちらの記事をどうぞ。

wordpressの子テーマの作り方が絶対わかる記事【初心者必見】

wordpressの子テーマの作り方って理解できてますか？くまさん僕は最初まーったく理解できませんでした。最近web制作の現場ではwordpressのカスタマイズがメインになることがほとんどではないでしょうか？僕がwebを触り始めた2005年ごろは、テーブルレイアウトのサイトがメインでした。そこから...

gomanote.com

2018.08.06

作業内容

グローバルメニューにSNSアイコンを入れたい

TCDテーマ「KADAN」デモサイト、ヘッダー部分

上の画像は今回カスタマイズするTCDテーマ「KADAN」のデモサイトです。

グローバルメニューがありますが、この部分に「フェイスブック」「インスタグラム」「youtube」のアイコンを入れて欲しい、とのリクエスト。

通常、wordpressのメニューは「外観」＞「メニュー」から設定するのでテキストデータしか入りません。力技でソース改変も考えましたが便利なプラグインがありました。

Menu Icons by Themeisle – Add Icons to Navigation Menus

Add icons to WordPress navigation menus easily — pick from Font Awesome, Dashicons, image icons & more. Style menu items with custom colors & sizes.

ja.wordpress.org

プラグインインストール後、メニューの設定で画像のアップロードができるようになります。

「メニュー画像」から画像を設定します。

画像はpngデータを使えば透過を使えますので今回はそうしています。

ただ、そのままでは「画像サイズ」を選んでもオーバーサイズになってしまうので、該当するCSSを書き換えて高さと位置を揃えています。

HTML

<li id="menu-item-45" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-45"><a href="https://www.facebook.com/chakouso/" class="menu-image-title-hide menu-image-not-hovered"><span class="menu-image-title">Facebook</span><img width="256" height="256" src="http://dev2.chakouso.com/wp-content/uploads/2018/07/fb-icon.png" class="menu-image menu-image-title-hide" alt="" /><span class="sub-menu-toggle"></span></a></li>
<li id="menu-item-46" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46"><a href="https://www.instagram.com/chakouso/" class="menu-image-title-hide menu-image-not-hovered"><span class="menu-image-title">インスタグラム</span><img width="256" height="256" src="http://dev2.chakouso.com/wp-content/uploads/2018/07/insta-icon.png" class="menu-image menu-image-title-hide" alt="" /><span class="sub-menu-toggle"></span></a></li>
<li id="menu-item-49" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-49"><a href="#" class="menu-image-title-hide menu-image-not-hovered"><span class="menu-image-title">youtube</span><img width="474" height="106" src="http://dev2.chakouso.com/wp-content/uploads/2018/07/youtube-icon2.png" class="menu-image menu-image-title-hide" alt="" /><span class="sub-menu-toggle"></span></a></li>

CSS

#menu-item-45 a{padding: 0 10px!important;}
#menu-item-45 a img{height: 20px; width: 20px!important;}
#menu-item-46 a{padding: 0 10px!important;}
#menu-item-46 a img{height: 20px; width: 20px!important;}
#menu-item-49 a{padding: 0 10px!important;}
#menu-item-49 a img{height: 20px;}

@media only screen and (max-width: 991px) {
	#menu-item-45 a{padding: 0 5.55556%!important;}
	#menu-item-46 a{padding: 0 5.55556%!important;}
	#menu-item-49 a{padding: 0 5.55556%!important;}
}
}

メニューに自動で振られるIDに対してCSSで制御を入れています。

各アイコンの高さを20pxに設定しているのとpaddingの調整、レスポンシブで画面幅が991px以下になった時はメニューがスマホ専用になるので、再びpaddingを調整しています。

PC

スマホ

透過PNGで作成したSNSアイコンが、PCとスマホのメニューにちゃんと表示されました。

ボタンのカラーを変えたい

クライアントのデザイン事務所からは、デザインデータをPDFデータでいただいています。

ボタンのカラーなどは既存のテンプレートから変更されていますので、そのカラーをCSSで反映させます。

作業内容

1. PDFの画面をスクリーンショットでキャプチャして、フォトショップで開く
2. スポイドツールで該当箇所の色を拾う
3. webカラーを確認してCSSに落とし込む

この流れでデザインデータのカラーを正確に再現できます。

最下段の＃の場所がwebカラーです。6桁の16進数で表示されます。

フッターエリアに「youtube」のアイコンを入れたい

デモサイト、フッターエリア

上記はデモサイトのフッターエリアです。

ソーシャルのアイコンが並んでいますが、youtubeがありません。今回使うアイコンはフェイスブック、インスタグラム、そしてyoutube。

表示は管理画面から制御できるので、不要なアイコンは消すことができますが、ないものは作るしかありません。

アイコンはグローバルメニュー用で作っていますが、色が白だったので黒でもう一つ作成。

該当箇所のソースを改変します。

HTML

元のHTML

			  <ul class="p-info__social p-social-nav">
          <?php if ( $dp_options['facebook_url'] ) : ?>
			    <li class="p-social-nav__item p-social-nav__item--facebook">
			  	  <a href="<?php echo esc_url( $dp_options['facebook_url'] ); ?>" target="_blank"></a>
			    </li>
          <?php endif; ?>
          <?php if ( $dp_options['twitter_url'] ) : ?>
			    <li class="p-social-nav__item p-social-nav__item--twitter">
			  	  <a href="<?php echo esc_url( $dp_options['twitter_url'] ); ?>" target="_blank"></a>
			    </li>
          <?php endif; ?>
          <?php if ( $dp_options['insta_url'] ) : ?>
          <li class="p-social-nav__item p-social-nav__item--instagram">
			  	  <a href="<?php echo esc_url( $dp_options['insta_url'] ); ?>" target="_blank"></a>
			    </li>
          <?php endif; ?>
          <?php if ( $dp_options['pinterest_url'] ) : ?>
          <li class="p-social-nav__item p-social-nav__item--pinterest">
			  	  <a href="<?php echo esc_url( $dp_options['pinterest_url'] ); ?>" target="_blank"></a>
			    </li>
          <?php endif; ?>
          <?php if ( $dp_options['mail_url'] ) : ?>
			    <li class="p-social-nav__item p-social-nav__item--mail">
			  	  <a href="mailto:<?php echo sanitize_email( $dp_options['mail_url'] ); ?>"></a>
			    </li>
          <?php endif; ?>
          <?php if ( $dp_options['show_rss'] ) : ?>
			    <li class="p-social-nav__item p-social-nav__item--rss">
			  	  <a href="<?php bloginfo( 'rss2_url' ); ?>" target="_blank"></a>
			    </li>
          <?php endif; ?>
		    </ul>

2〜4行目にyoutubeのアイコン画像を発生させるコードを挿入

			  <ul class="p-info__social p-social-nav">
			    <li class="p-social-nav__item p-social-nav__item--youtube">
			  	  <a href="#" target="_blank"><img src="http://######.com/wp-content/uploads/2018/08/youtube-icon_footer.png" width="80"  alt=""/></a>
			    </li>
          <?php if ( $dp_options['facebook_url'] ) : ?>
			    <li class="p-social-nav__item p-social-nav__item--facebook">
			  	  <a href="<?php echo esc_url( $dp_options['facebook_url'] ); ?>" target="_blank"></a>
			    </li>
          <?php endif; ?>
          <?php if ( $dp_options['twitter_url'] ) : ?>
			    <li class="p-social-nav__item p-social-nav__item--twitter">
			  	  <a href="<?php echo esc_url( $dp_options['twitter_url'] ); ?>" target="_blank"></a>
			    </li>
          <?php endif; ?>
          <?php if ( $dp_options['insta_url'] ) : ?>
          <li class="p-social-nav__item p-social-nav__item--instagram">
			  	  <a href="<?php echo esc_url( $dp_options['insta_url'] ); ?>" target="_blank"></a>
			    </li>
          <?php endif; ?>
          <?php if ( $dp_options['pinterest_url'] ) : ?>
          <li class="p-social-nav__item p-social-nav__item--pinterest">
			  	  <a href="<?php echo esc_url( $dp_options['pinterest_url'] ); ?>" target="_blank"></a>
			    </li>
          <?php endif; ?>
          <?php if ( $dp_options['mail_url'] ) : ?>
			    <li class="p-social-nav__item p-social-nav__item--mail">
			  	  <a href="mailto:<?php echo sanitize_email( $dp_options['mail_url'] ); ?>"></a>
			    </li>
          <?php endif; ?>
          <?php if ( $dp_options['show_rss'] ) : ?>
			    <li class="p-social-nav__item p-social-nav__item--rss">
			  	  <a href="<?php bloginfo( 'rss2_url' ); ?>" target="_blank"></a>
			    </li>
          <?php endif; ?>
		    </ul>

カスタマイズ後

youtubeのアイコンが入りました。

特定ページのフッタースライダーを消したい

TCDテーマ「KADAN」フッター

TCDのテーマ「KADAN」には、フッターエリアに記事のスライダーが入る仕様となっています。

このスライダーを特定の記事のみ消したいというリクエスト。

まず、該当箇所をデベロッパーツールで探します。

Chromeデベロッパーツール

ソースがわかったら該当箇所を制御しているクラスを探します。

見つかりました。<div class=”p-footer-slider”>の部分です。

TCDのテーマには、記事の投稿画面に「カスタムCSS」を設定できるところがあります。

カスタムCSS

これは、該当記事のみに適応できるCSSです。今回はこれを利用します。

CSS

.p-footer-slider{display: none;}

これでフッタースライダー部分のみ、この記事では非表示になります。

テンプレートを利用した固定記事にyoutubeの画像を埋め込みたい

「KADAN」テンプレート：料理

「KADAN」の固定ページには、あらかじめ用意されたカスタム投稿枠に、画像やテキストを流すだけで美しい仕上がりになる「テンプレート」機能があります。

リクエストは、このテンプレートを利用して3種類の固定ページを作り、それぞれ縦書きの説明部分の下にyoutubeの埋め込み動画を入れること。

これを再現するにはいくつかの合わせ技を使います。

まず、該当のテンプレートファイルを解析し、ファイル名は「page-type5.php」ということがわかりましたので、動画を挿入したい場所にコードを挿入します。

ただ、テンプレートは1種類、それを利用して3種類の固定ページを作り、それぞれに違う動画を入れるとなるとそのままでは不可能です。そこで、先ほどのカスタムCSSを合わせて利用します。

HTML

	<!-- GOMA -->
　　   <div class="l-inner temp-01">		  
		<div class="movie-wrap">
			<iframe width="560" height="315" src="https://www.youtube.com/embed/KfDTuNyup9Y?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
		</div>
	  </div>
　　   <div class="l-inner temp-02">		  
		<div class="movie-wrap ">
			<iframe width="560" height="315" src="https://www.youtube.com/embed/fmukjUoevf4?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
		</div>
	  </div>
　　   <div class="l-inner temp-03">		  
		<div class="movie-wrap">
			<iframe width="560" height="315" src="https://www.youtube.com/embed/3lwHT3pfAgQ?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
		</div>
	  </div>
	<!-- GOMA -->

テンプレートの該当箇所に、3種類のyoutube動画を埋め込みます。また、それぞれに「temp-01」「temp-02」「temp-03」のクラスも設定しておきます。

まず、動画をレスポンシブ化するために以下のCSSを記述。

youtube動画レスポンシブCSS

.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
	 margin-bottom: 100px;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

次に、表示を制御するCSSを各記事のカスタムCSSに記述します。

記事01のカスタムCSS

.temp-02, .temp-03{ display: none;}

記事02のカスタムCSS

.temp-01, .temp-03{ display: none;}

記事03のカスタムCSS

.temp-01, .temp-02{ display: none;}

これで、表示している記事以外の動画が画面に表示されなくなるので、結果として該当の動画のみが画面に表示されるようになります。

まとめ

いかがでしたか？テンプレートのカスタマイズをどんな風に行なっているかを、かなり具体的に紹介してみました。

僕はプロとして、デザイナーさんからの要求に可能な限り「できない」と言わないよう心がけています。

美しいデザインをディスプレイに反映させるために、ソースコードやCSSを眺めて考えるのがまるでパズルゲームのようで、心底「楽しい」と感じられているので天職かもしれませんね😀

昔はデザイナーから上がってきた画像を、Fireworksのスライスツールでテーブルレイアウトにしてそのまま利用したりしていましたが、いつの間にやら時代はwebプログラム優先になっていたと思います。

でも、これからwebの世界は本当の意味で「デザイン」が大事になると思います。

アート、印刷物、写真、建築物、プロダクトデザインなど、人が普遍的に「美しい」と感じるものが、もっと価値を持つ時代がくるのではないでしょうか。

パソコンに光回線が来たように、スマホに5Gがやってくることで容量の束縛から解き放たれて、良い意味で「なんでもあり」の時代が来ると思います。

くまさん

GOMAはどこまでも時代を追い続けます！

wordpressの子テーマの作り方って理解できてますか？

くまさん

僕は最初まーったく理解できませんでした。

最近web制作の現場ではwordpressのカスタマイズがメインになることがほとんどではないでしょうか？

僕がwebを触り始めた2005年ごろは、テーブルレイアウトのサイトがメインでした。
そこから時代が変遷し、CSSやらCGIやらCMSやら何やら何やらいろいろ出てきて、今はwordpressを扱うことがほとんどです。

htmlとCSSは理解できても、wordpressはちんぷんかんぷんな方もい多いのではないでしょうか？
そんな、今からwordpressカスタマイズを始めようとする人が、ほとんどつまずくモノが「子テーマ」であると断言できます！僕もそうでしたから。

この記事では、wordpressの子テーマの作り方について、誰でも100％わかる内容で記事にしてみようと思います！

子テーマを作る前に

子テーマとは

簡単に言うと、「wordpressのテーマを安心してカスタマイズする」ための物です。

wordpressはCMSと呼ばれるブログベースのシステムです。根幹には「記事」があり、テーマを着せ替えるだけでサイトの見た目を簡単に変えることができます。

最近はコーポレートサイトの案件でも、記事をクライアントが更新できるwordpressで作ることが本当に多くなってきました。

TCDなど国内の有料テーマを選べば、驚くほど簡単に美しいサイトを構築することができます。

そんなwordpressのテーマですが、ソースコードやCSSを直に触ってカスタマイズした場合、テーマの更新で全部消えてしまった！という事態が起こります。

くまさん

最近も取引先の方がそれでカスタマイズを全てパーにした話を聞きました。背筋が凍ります！

ローカルで更新ファイルを管理していれば問題ないのですが、非常に煩わしく大変ですよね。そんな問題を全て解決してくれるのが「子テーマ」なのです。

環境を整える

ではここから、子テーマを作る前の環境整備を、僕のやり方を例にとって説明していきます。

まず、構造を理解する

wordpressを本格的にカスタマイズするにあたり、初心者の人が一番怖いのが「phpファイルを触る」と言うことではないでしょうか？

ご存知の通りhtmlやCSSは静的ファイルなので、web構築の基礎を学んだ方であればそれほどハードルは高くないと思いますが、PHPファイルは動的ファイルです。ちょっと間違うだけでサイトそのものがエラーで落ちる、なんてことも多々あるので恐怖ですよね？

くまさん

僕はそれでサイトを全て粉砕したこともあります。

でも、恐れることはありません。バックアップを取って触れば良いのです。

PHPファイルそのものは動的プログラムですが、最終的に出力されるのはHTMLです。そこを理解して触れば初心者でもどんどんwordpressをカスタマイズできます！

ローカルでの作業に徹する

脅されます。

wordpressの管理画面には、直接テーマを触ることができるエディタがついていますが、ここでカスタマイズすることは100％おすすめできません。wordpressさんも上記のように注意！を促してきます。

と言うわけで、テーマをカスタマイズするときはローカルでの作業環境を構築する、というのが僕のおすすめのやり方です。

ローカルの作業環境構築方法

では、僕のおすすめの方法を説明していきます。僕の作業環境は「Adobe Dreamweaver CC」です。

くまさん

マクロメディア時代からかれこれ10年以上お世話になっております。

というわけで、Dreamweaver CCの環境を例にとって進めていきますね。

子テーマの作成方法

くまさん

さて、ここからが本題です。

では、今ちょうどカスタマイズしているTCDのテーマ「KADAN」を例にとって進めていきましょう。

テーマディレクトリのダウンロード

やり方は割愛しますが、サーバーに接続し「themes」ディレクトリの中でカスタマイズしたいテーマのディレクトリをローカルにダウンロードします。

ここでは「kadan_tcd056」というディレクトリがそれにあたります。

子テーマのフォルダを作ろう

子テーマの親となるテーマと同一の階層に、新しく子テーマのフォルダを作ります。

ここではわかりやすいように「kadan_tcd056-child」と、最後に「-child」をつけて作成しました。

子テーマフォルダの中身を作ろう

作成した子テーマフォルダの中に、必要なファイルを二つ準備します。

「function.php」と「style.css」です。

function.phpの設定

「function.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')
);
}
?>

くまさん

function.phpですが、最終行に改行を入れると動作しない不具合が出ることがあります。注意してくださいね。

style.cssの設定

style.cssは、親フォルダからそのままコピーして使用します。その方が今後のカスタマイズが楽になります。

コピーしたら、テーマのバージョン情報などがコメントアウトして書いてあると思いますので、そこを以下の内容で上書きします。

@charset "UTF-8";
/*
 Theme Name:   kadan_tcd056-chaild
 Theme URI:    
 Description:  kadan_tcd056-chaild Theme
 Author:       Design Plus
 Author URI:   http://design-plus1.com/tcd-w/
 Template:     kadan_tcd056
 Version:      1.0.0
*/

内容説明

• Theme Name:
  子テーマの名前（必須）フォルダにつけた名前をそのままつけるとわかりやすいです。
• Theme URI:
  テーマURI — テーマの配布ページなど。
• Description:
  説明文です。
• Theme Author:
  作者の名前
• Author URI:
  作者のURI
• Template:
  親テーマフォルダの名前（必須）
• Version:
  バージョン管理する場合は記述。

赤で表示しTheme NameとTemplateは必須です。他はなくても動作します。

最低この2つのファイルが用意できたら子テーマの準備は完了です。サーバーへファイルをアップロードします。

子テーマを有効化しよう

上記の準備ができたらwordpressの管理画面へ戻ります。

これで子テーマがwordpressに認識されて有効化できます！

ついでに、管理画面のサムネイルをかっこよく表示したいので準備も合わせて行いましょう。

子テーマサムネイル設定方法

そのままではサムネイルがなくてさみしいので設定してみましょう。

「screenshot.jpg」（pngも可）という名前の画像ファイルを用意します。中身は4：3のサイズならピクセル数は問いません。それを子テーマのフォルダに入れてアップすれば、子テーマのサムネイルが表示されます！

子テーマの設定完了！

これで子テーマの設定が終了しました。

くまさん

お疲れ様でした！結構簡単でしたよね😀

子テーマの構造について

テーマのバージョンアップが行われる際は、基本的にテーマのディレクトリ内が全て上書きされます。なので、ファイルの内容をカスタマイズしていてる場合上書きされてしまうわけです。

では子テーマの構造について説明します。

ルールとして、子テーマが設定された場合、必ず子テーマディレクトリ内のファイルから優先的に参照します。

上記の場合、「footer.php」「front-page.php」のカスタマイズを行うために、親ディレクトリからファイルをコピーして持ってきています。

これにより、「footer.php」「front-page.php」のファイルは子テーマ内のものが読み込まれるので、こちらをカスタマイズして入れば親テーマのディレクトリが全て上書きされても問題ないのです。

あとは、カスタマイズしたいファイルを親テーマフォルダから子テーマフォルダにコピーして、カスタマイズしてアップロードの繰り返しです。

さあ、何も恐れることはない！ガンガンカスタマイズだ！

くまさん

ここまで来たらあとは好きにLETSカスタマイズ！

あとは、CSSなりファイルなりをガンガンカスタマイズしていくだけです。カスタマイズ場所を知りたい場合は下記のChromeデベロッパーツールを利用するのがおすすめです。

画面で「ここをカスタマイズしたいなー」という場所を右クリック、メニューから「検証」を選択するとデベロッパーツールの登場です。

コードやCSSを画面上で触れちゃいますので、「ここのwidth広げたいな〜」とか、「このテキストもうちょっとデカくしたいな〜」とかを直接画面上でテストできます。

しかも、どのCSSが作用しているかもわかるので、確認したらあとは子テーマのCSSのコードを書き換えてアップロードすればOKです。

くまさん

いやー、便利な世の中になりました！

まとめ

いかがでしたか？子テーマの作り方がわからない方も理解することができたのではないでしょうか？

wordpressの構造が理解できたら、カスタマイズの自由度ががぶわーっと増えます。それに子テーマがものすごく役立ちます！

子テーマさえ作っておけば、カスタマイズファイルがphpエラーを出しても最悪親テーマフォルダから持って来れば必ず復旧できます。さあ、皆さん恐れずにLETSカスタマイズ！

プロが教えるwordpressによるコーポレートサイトの作り方

wordpressによるコーポレートサイトを作ろう！くまさん僕のwordpressによるコーポレートサイトの作り方を伝授します！プロフィールを見ていただければわかりますが、僕はwebもやるデザイナーです。とはいえ最近の案件の中心はwebサイト構築が多く、そのほとんどがwordpressを利用したコー...

gomanote.com

2018.08.10

ホテルの自社サイト予約システム wordpressプラグイン実装から完成まで！

くまさん

今回は前回の記事に引き続き、wordpressの予約プラグイン「HBook」の実装とカスタマイズについてお送りします！

前回、数々の苦難を乗り越えて動作を成功させたHBook。普通に実装したつもりが普通じゃないことが起こるのが世の常です・・・。

wordpress宿泊予約システム HBookカスタマイズ【前編】

ホテルの自社サイト予約システムwordpressプラグインでどこまでできるのか？！くまさん今回はホテルを営んでおられるクライアントさんからのご依頼で、サイトのリニューアルおよび自社サイトの中で稼働する予約システムのご相談を受けました！現在、このクライアント様は楽天トラベルやbooking.comなど...

gomanote.com

2018.02.23

この後も色々とカスタマイズで苦労しましたので、忘備録として経過をアップしていきます！

「Hbook」のカスタマイズを公開しているサイトを参照

身もふたもないですが、HBookのカスタマイズは非常に詳しく解説されているサイトがあります。

インストール、日本語化など、基本的なカスタマイズはそちらを参照していただければ問題なく行えるでしょう。

ページが見つかりません。 | iT-STUDIO（アイティスタジオ） WORDPRESS ホームページ制作 | 仙台市

it-studio.jp

ページが見つかりません。 | iT-STUDIO（アイティスタジオ） WORDPRESS ホームページ制作 | 仙台市

it-studio.jp

上記サイトを中心に見れば、一般の開発者であればサイトへの実装は難しくないと思います。

以下は、上記サイトで解説されていないポイントについて挙げていきます。

クレジットカード決済

クレジットカード決済を実装

予約システムとしては、クレジットカード決済が使用できなければ話になりません。

その点、HBookはStripeのクレジットカード決済に対応している点が素晴らしいポイントです。

Stripe | 収益向上のための金融インフラ

Stripe は、あらゆる規模や業種のビジネスにおける決済の受け入れ、柔軟な請求モデルの構築、および資金移動の管理を支援する、金融サービスプラットフォームです。

stripe.com

審査も簡単で手数料も他のサービスに比べても遜色なく、何と言っても実装しやすい。

まずはアカウントを作ってすぐにテストモードのキーを発行し、HBookに入れてテストしてみてください。

HBook→お支払い→ストライプの設定で二つのキーを入力するだけです。

HBookのすごいところは、Stripeの管理画面を通さず、全てWordpressの管理画面から決済、キャンセル処理、ノーショーでのチャージなどを全て行える点。まるで予約システムを開発したかのような完成度です。

多言語化

多言語対応もプラグインの連携のみで

インバウンドが隆盛する現在、宿泊予約サイトを作るなら多言語化は必須です。

在庫を言語間で共有しつつWordpressで運用するのであれば、多言語プラグイン「Polylang」がベストの選択です。

Polylang

シンプルかつ効率的に多言語化しましょう。いつものように投稿とタクソノミーを書き続けながら、同時に言語を定義します。

ja.wordpress.org

HBookとの相性も良く、無料プランで全く問題なく多言語化が可能です。

ただ1点、Polylangをインストールするとエラーが発生するポイントがあるのでそこを解消する必要があります。

公式サポートページ該当箇所

hotelwp.com - hotelwp リソースおよび情報

hotelwp.com は、hotelwpに関する情報用の最新かつ最適なソースです。一般的興味の問題に関連するトピックもここから検索できます。お探しの内容が見つかることを願っています！

hotelwp.com

公式サポートページで説明されていました。Chromeで翻訳すれば意味がわかると思います。

これが該当箇所です。

自分はここでどハマりしました・・・

この他にも、公式サポートサイトは英語が全く分からなくても（自分もそうですが）Google翻訳すれば意味は理解できると思います。

予約可能日設定を月単位から日単位へ

コードのカスタマイズが必要

HBookはディフォルトで、予約可能日設定が「月」単位でしかできません。

日本の予約サイトで良くある「今日から」3ヶ月などに設定しようとしてもできません。

たとえば、今日から起算しての3ヶ月後である90日後に設定したい場合は以下のコードの書き換えが必要です。

plugins→hbook→utils→utils.phpの778、779行目

$tmp_date->modify( "+{$nb_months} month" );
$max_date = $tmp_date->format( 'Y-m-t' );

を、

$tmp_date->modify( "+{$nb_months} day" );
$max_date = $tmp_date->format( 'Y-m-d' );

に変更。

ついでに管理画面側の表記を変更するために、同ディレクトリ内の「options-utils.php」内の433行目、

'caption' => wp_kses( __( 'Enter the maximum number of <u>months</u> ahead...', 'hbook-admin' ), array( 'u' => array() ) ),

を、

'caption' => wp_kses( __( 'Enter the maximum number of <u>days</u> ahead...', 'hbook-admin' ), array( 'u' => array() ) ),

に変更します。

これで、予約可能日設定を日で管理できるようになります。

まとめ

以上、速足でしたが僕が独自にカスタマイズした部分をまとめてみました。

コードが読める一般的な開発者ならこれでHBookを多言語＆クレジット決済で使用することができると思います。

日本語で解説されている記事が少ないので、wordpressで予約システムを実装する人の手助けになれば幸いです。ぜひともチャレンジしてみてください！

前回の記事

wordpress宿泊予約システム HBookカスタマイズ【前編】

ホテルの自社サイト予約システムwordpressプラグインでどこまでできるのか？！くまさん今回はホテルを営んでおられるクライアントさんからのご依頼で、サイトのリニューアルおよび自社サイトの中で稼働する予約システムのご相談を受けました！現在、このクライアント様は楽天トラベルやbooking.comなど...

gomanote.com

2018.02.23

ホテルの自社サイト予約システム wordpressプラグインでどこまでできるのか？！

くまさん

今回はホテルを営んでおられるクライアントさんからのご依頼で、サイトのリニューアルおよび自社サイトの中で稼働する予約システムのご相談を受けました！

現在、このクライアント様は楽天トラベルやbooking.comなどの予約サイトでの集客がメインで、自社サイトの方には昔ながらのメールフォームでの予約しか存在しない状態でした。

できるだけ低予算で、自前のシステムをというとこでしたので、ホームページのリニューアルに合わせての制作を承りました。

忘備録として経過をアップしていきます！

なぜ自社サイトで予約システムを使うの？

これはズバリ「手数料がかからないから」です。

現在、ほとんどの宿泊施設が楽天トラベル、じゃらん、booking.comなどの宿泊サイト経由で収益を上げられています。

大手サイトに掲載すればもちろん集客効果は高いですが、必ずかかってくるのが「手数料」です。

宿泊施設を運営している人以外はほとんど知らないことですが（僕も自分でゲストハウスを経営するまでは知りませんでした）、宿泊サイト経由で販売した場合7％〜15％の手数料を運営会社に取られる仕組みになっているんです。

さらに、それとは別にクレジットカードで決済した場合クレジットの決済手数料も別途上乗せされます。これが約3〜5％。

ということは、大手サイト経由でクレジットカードで決済された場合、15％程度の手数料が毎回かかる計算になります。

例えば、格安のゲストハウスのドミトリー（相部屋）だったら、非常に競争の激しい分野なので3,000円程度の宿泊料が相場です。

ここから手数料15％が引き落とされたら手元に残るのは2,550円！

なんということでしょう。そりゃあ元締めは儲かりますよね・・・

というわけでの自社サイト予約なのです。

なら、なぜみんな予約サイトに掲載するの？

これはズバリ、大手の検索サイトが非常に強いからです。

それを後押ししているのがgoogle。試しにgoogleで近くのホテルや名前を知っているホテルなら名前で検索してみてください。

ためしにグランヴィア京都で検索。

検索結果のトップには「booking.com」の広告。下には「楽天トラベル」「一休.com」「じゃらん」。googleが提供する右ウィンドウの中には「広告」と書かれたチェックイン機能とその下にはスポンサー経由の価格がズラリ。

各予約サイトがgoogle莫大な広告料を支払っているので、googleもそれに報いるためにこれでもかと検索結果に反映させているわけです。

多くの人はこの検索結果から、例えば「楽天のポイントが貯まるから」「パッとみて一番安い金額をクリックした」「空き状況の確認を右ウィンドウから行った」などのルートで宿泊サイト経由での予約を行います。

つまり、お客様の宿泊料金が→宿泊施設→googleへと流れているんですね(^_^;)

プラグインだけで実装できる予約システム「Hbook」

そこで、自前のサイトから予約してもらえれば手数料がかからない、その分宿泊料金を安くできる、ということでの予約システムというわけです。

さて、依頼を受けてからどうしたものかと考えましたが、通常プログラム開発で予約システムを開発会社に依頼すると3桁は降らないのが現実。

今回はサイトのリニューアルも同時に行い、wordpressでの構築を行うことは決定していました。そこで、プラグインでの実装は可能なものかとgoogleで検索して見つかったのが「Hbook」です。

購入から実装・・・トラブル続発！

購入

海外での評価も非常に高く値段も49ドルと非常にリーズナブルでした。

販売しているのは「Envato」海外でwordpressのテーマやプラグインを有料で販売しているサイトです。

偶然、前回このサイトでテンプレートを購入したことがあり、アカウントを持っていたのですんなりと購入できました。

実装

プラグインはサイトからダウンロードしアップロード、ライセンスは送られてきたメールから入力ですんなり実装できました。

が、ここからトラブルの嵐が・・・

マニュアルを読みながら項目を追加していったのですが、大方の入力を終えてショートコードをページに貼り付けたら「部屋が存在していません」という内容のエラーが！

何をどう触っても直りません。

マニュアル通り1から項目の入力をやり直していくと、なんと「宿泊施設」の項目の入力欄の一部がなくなっているじゃないですか！？

エラーの原因はこれだとおおよそ目星はつきましたが、なぜそうなったかの理由がわかりません。

自分が行った作業を見返していくと、wordpressのバージョンを最新にしていたことに気がつきました。（結果的にこれが原因ではなかったのですが・・・）

そこからバージョンダウンを施しましたが直りません。

DBに情報が書き込まれているのが原因かと思い、新しくwordpressを立ち上げてそこへインストールを試みましたが、使用するドメインとDBを間違えて無駄にサイトを立ち上げる凡ミス。

そしてそれが原因で、登録しようとしたライセンスが既に登録されているので使用できないとのメッセージが！

ここから各愛とのライセンス情報を確認しましたが、全てのサイトで解除済み＆登録したら使用できないとのメッセージが・・・完全に八方ふさがりです。

しっかり対応してくれた海外サポート！

もはやどうしようもなくなり、サポートに問い合わせてみること。

もちろん英語のみだったので不安だったのですが、英語のできる奥さんに助けてもらい、「アカウントが登録できなくなっちゃったけど助けて！（意訳）」という旨のメールを送ってみました。

するとなんと数時間でちゃんと返事が来たではないですか！？

そこから2回やり取りを行い、アカウントが紐づいているWordpressアカウントを教えてもらい（結局アカウントを消さずにDBを上書きしたのが原因でした・・・）、最終的にアカウントの再発行を行ってもらって復帰することができました！

やりとりの最後で「良い日曜日を！！」と書かれていたのには笑いました。休みの日は休めってことですね（笑）

まとめ

とりあえずの窮状は脱してサイト運営の準備は完了しました。

次回は実際の動作について説明していきたいと思いますね！

次の記事

wordpress宿泊予約システム HBookカスタマイズ【後編】

ホテルの自社サイト予約システムwordpressプラグイン実装から完成まで！くまさん今回は前回の記事に引き続き、wordpressの予約プラグイン「HBook」の実装とカスタマイズについてお送りします！前回、数々の苦難を乗り越えて動作を成功させたHBook。普通に実装したつもりが普通じゃないことが起...

gomanote.com

2018.07.03

きのこ

移住した人にはフリーランスのデザイナーが多い気がする

ソロ活動の人はあまり見かけないが、紙面やその他媒体で見かける移住ご夫婦のどちらかが作家さん、もう一方がウェブデザイナーさん、というパターン。ウェブデザイナーは時折ディレレクター、デザイナー、プロデューサーだったりする。おそらく常時移住先にいる訳ではなく週の何日かは都内、”まち”に出ていっているよう。

そこで！京都の田舎、胡麻（ごまと言います。ちょっと自慢。）に移住したGOMAがウェブ屋として日々体験する利点と不便な点をまとめました。移住を考えているデザイナーさん、ウェブ屋さん必見。特にインフラについては致命的な事実に見舞われ、言い方を換えれば手抜かり、また別の言い方をすれば「そうであっても魅力ある場所だった」というポイントをまとめました。

ウェブ屋は移住に向いているのか

答え：自分で仕事を取ってこれるなら、向いています。

本音：田舎にネット環境（もちろんブロードバンド）が完備されてなかったら悲劇

ということで、見事に悲劇を引き当てた私たち。ブロードバンドはありません、もちろんネット環境ありません、そう、職場環境マイナスからのスタート。やるなぁ。

GOMA(ゴーマ)の失敗

実は、というか事前からわかっていて楽観的だったのが、光回線がなかったこと。ここは京都なので、通常（とも言えないのがミソ）NTTひかり・EOネット（関西電力系列）と電線を持っている通信会社が通信網を張りめぐらしています。マンション単位の契約なら、プチュっとTA、モデムなどを接続すれば即利用可、なんてことも。

しかし！なんと！胡麻の、私たちが住む東胡麻エリアだけ空白地帯。

NTTさんも、EOさんも、エリア外。要望書をご近所さんにもお願いして提出していますが今のところ音沙汰なし。さらに、詳しい話によると東胡麻の両端まで回線が来ているそう。つまり家から１キロほど離れた大学や、住宅地にはスイスイブロードバンドがあって、うちにはない。物理的に配線されているので、もどかしいこと限りなし。

気分はこんな感じ。

という訳で次の手を考えてみました。

念押しですが、GOMAはウェブ屋です。

空中の電波を拾ってみる（合法的に）

エリアの広さと柔軟さを期待してモバイルルーターwimax2を使用してみた。だいたい上り1mbps、下り10mbps。

どれくらい遅いかというと、ADSLよりは早い。Google photoへのアップロードがままならず、共有できない。

さらに追い討ちをかけたのが、雨の日など天候が悪い日はシグナル赤、メールの送受信はタイムアウト。コールセンターに申し入れして若干の改善をみたが、GOMAの事務所自体を拠点にすること自体危ぶまれる事態。もう、仕事放棄したいです。

GOMA脱力。

ご近所に相談してみるが、紹介されたケーブルテレビは速度とコスト面で折り合いがつかないので、やはり導入はしない方向で。もどかしさ、増し増し。

そんな時！天の助けが舞い降りた！

僻地向けモデムサービスを導入！

ついでに携帯電話を１台入れ替えする羽目になったのですが、LTEで１ヶ月30GB使える契約を発見！しかもGOMA事務所でも速度がちゃんと出る。wimaxを解約し、乗り換えて嬉しくて、wifiも開放し、今まで滞っていた数々のアップデート、溜まった写真のアップロード、をしたところ・・・・

容量使い切ってネットノマドに

再三ですがGOMAは夫婦でウェブ屋をやっています。

そんな私達がネットを使い切ったら・・・夫はコーダー、デザイナー、妻は企画とライティング。妻はオフラインでもまぁまぁなんとかできないこともないですが、夫は仕事にならない。さらに後で知ったのですが、容量を使い切ったら低速モードになるかと思いきや、低速も低速、超低速で何のページも開きません。ログイン認証でタイムアウト、です。この時まだ月の半ば。後２週間ネットなしでウェブ屋を続ける・・・しかありません！

夫は仕事放棄でスマホ中毒に・・・なりませんでしたが、唯一影響を受けなかったスマホも経費削減で格安スマホにしたので、１GB使い切ったら、500MB=500円で購入という、課金ゲーム状態。

力尽きかけるGOMA。

次なる手は・・・・

飲食店のフリーwifiを利用

日本でもおそばせながwifiサービスを提供する飲食店が増えてきました。スターバックス、マクドナルド、この辺りは知られたところ。また、三大キャリアが提供するWi-Fiスポットも広まって外でPC作業する人には使い勝手は良くなってきています、”まち”では。ここは、田舎。

GOMAから最寄りのスタバ、45km

所要時間１時間、ドドール、タリーズは？ってそういうものはここにはありません。

GOMAから最寄りのマクド、40km

隣の兵庫県まで出勤です。

真ん中の”南丹市”がGOMA所在地

選んだのはスタバ。選択理由は、「久しぶりに都会っぽいおしゃれな雰囲気がいい。」という私の気持ちでした。というわけで１時間ドライブ。スタバへGO。

涼しくて快適〜♪

メリット

• お店によりますが、ここのお店は仕事目的での電源利用ができました。（京都市内は軒並みNG）
• wifi使用の認証が１ステップ。

デメリット

• GOMAから遠いので結果的にコスパが悪い

ここでいうコスパは、自宅で格安スマホ課金１GB1,000円をテザリング、という条件と比較して、燃料代、飲食代の方が高いという結果です。決してスターバックスが使えないという意味ではありません。TSUTAYA併設だったので、同時に資料として書籍をチェックしたい場合など、また気分転換に向いています。しかし、１時間は手近ではない。

そういうわけで、毎日は使えないという結論に至り、遠出しない方法を模索することに。

市内の公共フリーwifiを利用

GOMAのある南丹市、市内の主要施設や観光施設にはこのようなステッカーが貼られていて１ステップ認証で30分無料で使えます。30分終了したら、またログインしなおしたら使える便利なもの。

実は、転入時に申請をしようとしたのですが、導入サービス・補助が前年度で終了してしまったとのこと。無念。大きな声では言いにくいのですが、ケーブルインターネットより早い。早速近所の公共施設に繰り出しました。

図書館

静か、調べ物もできる！やった！ネットも早い！

しまった・・・電源使用不可。夫のPCは大画面なのでバッテリー消費激しく、電源使用がマスト。私はフル充電で３時間くらい持つので問題なし。

手ブレ起こすくらいショック。

次に向かったのは

駅

日吉駅は駅改札のない小さな駅ですが、市の職員さんが切符販売や案内、清掃もしていて人に優しい駅です。また美山かやぶきの里へ向かうバスも出ていることもあり観光協会のデスクや待合室もあります。恐る恐るスタッフさんに尋ねると・・・

「どうぞどうぞ使ってください。若い人が来てくれて嬉しいな。」

あああああありがとうございます。人の優しさ身にしみる。

ああ、何とかなった。これで月末まで作業できる。

実は、今ココ。日吉駅でブログ記事を書いています。夫は横でメールのやり取りやデザインをしています。公共wifiに助けられ、ウェブのお仕事を１本受注しました（涙）大丈夫です、ウェブ集中して作業するときは安定したネット環境＝実家（GOMAから３０km）に合宿しに行きます。いつか、公共wifiが導入できる日を夢見て。シェアオフィスで雇用を生み出したり、いろんな化学反応を生み出したいので、公共wifiを夢見ます。

と、ここまでかなり赤裸々に、というかクライアントさんを不安にさせてしまう実情を明かしてしまいましたが、田舎暮らしあるある、が伝えられたでしょうか。

結論　ウェブ屋は移住にまぁまぁ向いている。

まちと田舎は違います。郷にいれば郷に従え、で柔軟であったら何とかなります。物とお金の消費がスピーディな”まち”の常識ではどうにもならないことがあります。ですが、気にせず続けることができたら、それはもう問題ではないんじゃないでしょうか。
何より、色んなことが起こっても最終的には自分のペースで仕事ができ、近くにクライアントさんがいる場合は納品した後の効果測定や、成果を実感、誰かの役に立っているという気持ち部分での充実が何よりモチベーションになります。ない場所に需要を生み出すおかしみも、あります。

私達みたいに愉快な毎日も、また新しい発想を生む何かに変わるかも！

移住を考えるウェブ屋さん、ぜひ前向きに考えてみてくださいね。