2019年

【Woocommerce】特定の商品カテゴリーの子カテゴリーインデックスに表示する分岐

2019年6月21日 金曜日

親の商品カテゴリーをIDで指定します。

<?php if( has_term( get_terms(
array(
 'child_of' => 商品親カテゴリーID,
 'taxonomy' => 'product_cat',
 'fields' => 'names' ) ),
 'product_cat' )): ?>
・・・
<?php endif; ?>

 

別のhtmlページから遷移してきたアンカーリンクのポイントがズレる (その2)

2019年6月6日 木曜日

まもなくサポートも無くなるとはいえ、IE11での閲覧に対応しないといけないうえに、別のhtmlページのアンカーリンクするという案件がございまして、
構築手法にも少し無理はあったのでしょうが、他のブラウザは何ら問題はないのに、IE11での閲覧ではレンダリングがやたら遅くて、だんだんCSSが効いてきてページができあがるような挙動で結果、アンカーポイントがずれるという事態になりました。

 

以前にご紹介させていただいたコードを書いても、状況が好転せず、いろいろ探しましたら、InstantClick というjavascript を使うことで問題が解消しました。

nstantClick.io はリンクされたテキストや画像にマウスを載せると、pjaxという仕組みで、リンク先のサイト内ページを先行してロードを開始し、クリックして遷移したときはロードされたページに移動するというもので、当然アンカーポイントへの正確に移動します。

 

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>
</body>

 

もちろんIE11のケースに限りませんし、前回ご紹介したようなスライダーの整形の時間差でアンカーポイントがズレるようなケースもこれで対応できますね。

 

とくにアンカーリンクの場合でなくてももちろん使用可能で、ページ遷移のスピードが早くなっているのを体感できると思います。
そのことから高速化に有効として紹介されますが、あくまで遷移のスピードUpなので、GoogleのPageSpeed Insightのスコアが上がることにはなりません。
ユーザビリティ的には有効でしょうね。

 

ただ、マウスが触れば先行でページのロードが始まるので、サーバーにはそれなりに負荷はかかると思いますし、Google Analyticsの計測が狂うという話もあるようです。
先読みさせないリンクの書き方や、Google Analyticsの対策もあるようなので、対応が必要な方は調べてみてください。

【改訂】画像ファイル圧縮ソフト Voralent Antelope の取得先

2019年5月23日 木曜日

画像ファイル圧縮ソフト Voralent Antelope をダウンロード取得しようと voralent.com のアドレスにアクセスするとBoldright(ボールドライト株式会社)のホームページにリダイレクトされますが、そのページの下方でソフトのダウンロードを可能にしていただけました。

 

Boldright社の前身Voralent社のソフトウェア開発は終了し、Antelopeは2015年に開発を打ち切っておられるので、Windowsでの動作保証はいたしかねるとのことです。

 

Vectorのサイトからもダウンロードできます。
https://www.vector.co.jp/soft/dl/winnt/art/se506994.html

多言語対応化プラグイン Polylang の使い方

2019年5月17日 金曜日

弊社でも商品やサービスの販売先を海外に求めたり、外国人客を取り込むクライアントさまの多言語サイトをいくつか制作するようになりました。 WordPressの多言語プラグインは有料のWPMLをはじめいろいろありますが、弊社は Polylang を使いました。

 

 

Polylang のしくみ

Polylangは、1つのカテゴリーの1つの投稿を各言語で書き分けるのではなく、言語ごとのカテゴリーに、同じ内容でそれぞれの言語であらわす投稿を存在させて、 これを積み重ね合わせて、別の言語で書いている投稿の画面へ一度閉じて一覧から選び直すことなく1クリックでダイレクトに移動して編集できるようにするもので、WordPressの構造的には基本的な複数のカテゴリーと投稿がある状態と変わりありません。

 

 

Polylang の設定

以下は弊社のお客様のサイト制作での手順ですが、Polylang をインストール&有効化のあと、管理画面サイドメニュー「言語」から「言語」を開いて、作成する言語を追加します。 ★ の欄でマウスを滑らせて、デフォルトの言語を設定してください。この場合は「日本語」をデフォルトで選んでいます。 日本語のURLはドメイン、英語はドメイン/en/ など、ドメイン直下に仮想で言語のディレクトリがあるURLを採用しました。 テンプレートをカスタマイズするときは home_url はこの場合自動的に、日本語ではドメイン、英語ではドメイン/en/ になるので、全言語共通で使うimgやCSSの読み込みのURLパスは home_url を使わないなど、注意と工夫が必要です。

 

 

「同期」ではアイキャッチ画像やカスタムフィールドで全言語共通で使う項目があったので以下のように設定しました。

 

 

 

投稿の方法と注意

Polylangを有効にすると、投稿画面の右上に「言語」のメタボックスが出現しますが、一番上のプルダウンは今から編集する言語を確認するもので、ここから同じ内容の投稿の他言語での編集画面には移動できません。 間違って操作すると修復がとても面倒なので基本的に触らないようにしましょう。 その下の「翻訳」のそれぞれの国旗の横の+マーク(一度投稿済みなら鉛筆マークに変わる)から移動すれば、それぞれの言語の同じカテゴリーの同じ内容の投稿が関連づいて生成します。 この関連が公開後にユーザー閲覧側で「言語切替スイッチ」に反映され、見ているページの他言語への移動が国旗や国名のリンクをクリックすることで移動できるようになります。

 

テンプレートにおける言語での条件分岐の書き方

ディレクトリの en や zh ではなくロケールで記述する必要があります。

<?php $locale = get_locale(); ?> <!-- 言語条件分岐を行う前に記述必須 -->
<?php if($locale == 'en_GB'): ?>
English.English.English.English.English.English.English.
<?php elseif($locale == 'ja'): ?>
日本語。日本語。日本語。日本語。日本語。日本語。日本語。日本語。
<?php endif; ?>

言語切替スイッチ

言語切替スイッチはウィジェットのパーツで使えるようになりますが、テンプレートに設置したい場合は以下のように書きます。

<?php pll_the_languages(array('show_flags'=>1,'show_names'=>'')); ?>

言語切替スイッチの国旗のデザインを替えたい

wp-content/polylang/ に デザイン変更した 言語ロケール.png (例 en_GB.png) を置いてください。

WordPressのマルチサイトのお引越し(phpMyAdmin+FTP+プラグイン編)

2019年4月11日 木曜日

クライアント様からWordPressのマルチサイトのお引越しを承りました。
サーバーのこととかそう詳しくなくて、phpMyAdminは使うけど、なるべくWebデザイナーのレベルでなんとかなる方法だ思うので備忘録のつもりで書いておきます。

まず引越元のサイトについて。

 

1. FTPでwp-contentからuploadsフォルダをダウンロードしておく。
2. WordPressに「特権管理者」のユーザーでログインする。
3. WordPressプラグイン WP Database Backup (WP DB Backup)を使って、「次のテーブルも選択して保存することができます」にチェックを入れて
sql.gzバックアップデータをダウンロードしておく。

 

WP Database Backupで生成したsql.gzは phpMyAdminでエクスポートするものからWordPressのメディアにアップロードした画像データそのものがない状態のものです。
これを引越し先のサーバにのuploadsフォルダをアップして、phpMyAdminでsql.gzを取り込めば、通常の場合の引っ越しは完了します。

 

引越し先の環境で、ここからはマルチサイト化の手続きそのままですが、

wp-config.phpに

 
// マルチサイト機能の有効化
define('WP_ALLOW_MULTISITE', true);

を追記して再アップロードして、さらに

 
define('WP_ALLOW_MULTISITE', true);
define('MULTISITE', true);
define('SUBDOMAIN_INSTALL', false);
define('DOMAIN_CURRENT_SITE', '引越し先サイトドメイン');
define('PATH_CURRENT_SITE', '/');
define('SITE_ID_CURRENT_SITE', 1);
define('BLOG_ID_CURRENT_SITE', 1);

.htaccessファイルに

<ifmodule mod_rewrite="" c="">
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]</ifmodule>
<p># add a trailing slash to /wp-admin
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]
<p>RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]<br>
RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
RewriteRule . /index.php [L]

以上のように追記してください。

それぞれWordPressをインストールする階層で記述を調整してください。
基本的には wp-config.phpに

define('WP_ALLOW_MULTISITE', true);

を記述して再アップロードした時点で管理画面で、追記すべき内容が確認できます。

WordPressを展開する階層やドメインが異なる場合は Search Replace DB を利用して置換作業を行なってください。
引越し先のMySQLのバージョンが古い場合は、同サイトにある旧バージョンを利用してください。
ただし、旧バージョンはPHP7以上では動かないので、可動させるためにバージョンを下げるなどの対応が必要です。

2019年4月時点で、エックスサーバーの「WpX」はMySQLのバージョンが古かった…

ご利用に関して詳しくは他で調べてください。

 

引っ越し作業は現サイトが運用させたまま準備することがあると思いますが、その場合、引越し先のサイトがその時点でSSL化できない場合もあるでしょう。

そういう時に、WordPressプラグイン Really Simple SSL などが引っ越しもとで稼働しているままでデータをエクスポートして引越し先にもってくると、
不用意にhttpsのURLにリダイレクトされて作業が混乱することがあります。
今回の作業ではマルチサイトの環境を整えるときに再ログインを求められるのですが、そのときに困ることがありました。

引越し先で一旦管理画面からReally Simple SSL などのプラグインを削除すると作業が円滑にできるようになりました。

ページトップへ