WEB制作

WEB制作

【WordPress】Xeory Extensionでツイッターカード周りを手動で改修した方法

ツイッターにサイトのURLを打ち込むとツイッターの機能で「ツイッターカード」という、画像サムネイルと記事タイトルがついたカードっぽいものが表示される。

これを正しく表示させるには、ツイッターカードの仕様に則った記述がサイトのhead内に必要。WordPressの場合だとテーマによるが、ツイッターカードのデザインを変えるための設定項目があったりなかったりする。

このサイトで使っている『xeory extension』の場合はツイッターカードに関する設定項目はなく、自分でコードを解析しつついじるか、プラグインを使って対応する必要があった。

対象読者~注意事項含む~

WordPress中級者以上、初心者は非推奨。WordPressのプログラムコードをいじるので、相応のスキルや基礎知識があり、自己責任で対応できる人。

ピンポイントで言うと下記に該当する人。

・xeory extensionでツイッターカードをデフォルトのsummaryからsummary_large_imageに変更したい人
・同テーマはツイッター周りのプラグインを組み合わせるとトラブルを起こしやすいので、今現在で挫折しかかっている人
・同テーマは使っていないけど、WordPress周りで似たような事象で悩んでいる人、そのへんのヒントが欲しい人

ツイッターカードについて少し説明

その前にやろうとしているツイッターカードについての説明。日常生活にあってもなくても困らないけど、ツイッターにサイトのURLを打ち込むと表示される上のようなヤツ。

ツイッターカードのデザインは記事執筆時点で4タイプあり、サイト制作者の任意で選択することが可能。4タイプのうち、小さい画像が表示されるsummaryと、上の画像のように大きめに表示されるsummary_large_imageがよく使われる。

ツイッターカードの説明をしているサイトだと「画像が大きいsummary_large_imageの方が目立つから当然よくクリックされる」と主張している場合もあるが、Webサイト離れが進み、そもそもツイッターで情報収集する人はツイッター内だけの情報で完結させる傾向があるので、画像が大きいからと言って誘導させやすいかどうかは不明。

個人的には画像が大きいと企業の広告のように思われてしまい本能的にスルーしたくなる人も一定数いるはずなので目立つ効果と相殺されてしまう。そのため、画像が大きいから誘導効果が強いかというとそれほど関係ないと思う。

それ以前に有名人のサイトとかでない限り、ツイッター経由でサイトに入っていく人というのがそれほど多くないはずだ。今回はそれでもxeory extensionを設定するという矛盾に満ちた改修話である。

プラグインを使う方法は起こりやすい

WordPressにプラグインをぶち込んで解決させるやり方もあるけど、テーマの作りやサーバーの設定などによってはトラブルを起こしやすい。間違いなく言えることは、一つプラグインを増やすごとにサイトの表示速度や処理は遅くなっていく。

xeory extensionの場合で言うと記事執筆時点で存在するプラグインでは、どれを使ってもsummary_large_imageにスムーズに設定できるプラグインはない。

最初に使っていたのは「Twitter Cards Meta」だが、これは有料プランにしないとsummary_large_imageにできない。個人的にはオープンソースで無料が基本のWebやWordPressの世界で有料機能は使いたくない。そもそも「summary_large_image」という一文を記述するだけで、お金かかるというのはWeb制作者からしたら有り得ないし。

「JM Twitter Cards」はテーマとの相性で機能しない

次に試したのが「JM Twitter Cards」というsummary_large_imageも無料で設定できるプラグイン。これは設定もシンプルだし良さそうだったが、結果論を言うとテーマとの相性でうまく動作しなかった。

具体的には「JM Twitter Cards」が吐き出す記述がhead内のかなり上の方なため、summary_large_imageを設定したとしても、xeory extensionが元々吐き出している小さい画像が表示されるsummaryで上書きしてしまうのだ。ご存じの通り、HTMLやCSSの世界では同じものに対する記述があった場合、基本的には後から記述したものに上書きされる。

つまり「JM Twitter Cards」はテーマとの相性によっては、うまく動作しないということだ。「JM Twitter Cards」を使っていてキャッシュをクリアしたり、サーバーの設定を見直したり色々したけど、うまく反映されない人は、プラグインが吐き出しているコードをテーマが吐き出しているコードか上書きしていないか調べてみるとよい。

オールインワン系はバッティングしやすい

WordPressにはこういったツイッターカードの設定も含めた、何でもできるようなオールインワン系のプラグインが存在する。「All in One SEO Pack」や「Jet pack」、「Yoast SEO」といったものが有名だ。

ただ、この手のプラグインは何でもできるがゆえに、テーマ自体の設定とバッティングを起こしやすい。xeory extensionみたいに、ある程度はテーマ自体にSNSやSEO的な機能が盛り込まれている場合、導入には注意が必要だ。

今回の検証では“怖いので”入れなかったが、昔、head内の記述が思いっきり重複したりする状況だった気がして、これらの導入は控えている。付け加えると、私が運営しているサイトでこれらのオールインワン系プラグインを使っているサイトは一つもない。デメリットの方がが多いと考えて、あえて避けているからだ。

xeory extensionでの実装、改修方法

ここからは実際の実装手順。

静的サイトだったら、ツイッターの仕様に合わせてhead部分に記述するだけで済むが、WordPressかつxeory extensionなので少しややこしい。

最終的にhtmlで吐き出されているコードはWordPressが色々処理して生成されたものなので参考として最初に見ておく。次にFTPで接続してheader.php内の記述を見ると「wp_head」というそれっぽいものがある。

「wp_head」が読みだしている先はwp-includes内にある「default-filters.php」だ。これはテーマというより、WordPress自体のシステムファイルのようなものなので、かなり高度な知識がない限りはいじらない方が無難。ここを見てもツイッターカードを定義しているようなものはなかった。

WordPressが書き出している以上は、どこかにツイッターカードに関する記述があるはずなので、ディレクトリ内をGrepで全文検索(Windowsの場合はサクラエディタとかを使うと簡単にできる)してみる。

お目当てのものが見つかった。

wp-content/themes/xeory_extension/lib/functionsにある「head.php」でツイッターカードを定義しているようだ。これをいじればOKということで改修完了。

まとめ 動作しない時はコードを目で確認するのが大事

今回は実際の改修作業の手順や目星の着け方を時系列的に書いてみた。

WordPressのツイッターカードの設定を解説したページは検索すると色々出てくるが、「色々試したけど半日かかった」「丸1日ハマった」という感想を持つ人もいるようだけど、うまくいかない原因はテーマだったり、プラグインだったり、サーバーだったり様々。

でも、その多くが実際に吐き出しているコードも見ないで改修しているのが、そもそものハマる原因である。ブラウザやツイッターはコードをありのままに表示しているに過ぎないから、まずもって事件はコードで起きているのである。

まぁ、実際にWebサイト関係の仕事をしていると、半日や丸一日程度は沼にハマったとは言わないんだけどね。同じテーマの解決に数日以上費やすのは、むしろ日常茶飯事なのだ・・・。趣味でWebサイト作ってて、プロの世界に就職なり業務委託なり派遣なりしようと思っている人は覚悟あれ・・・。

ちなみに、ツイッターバリデーターを使うとキャッシュを更新できると説明しているサイトも多いけど、プロの世界wではツイッターにURLを投稿する前にツイッター側に認識させたり確認するのは常識レベルだったりする。

WEB制作

クラウドファンディングとは基本的に乞食行為である

以前にも同じテーマで書いた気もするが、クラウドファンディングとは「クラウド乞食」を横文字にしたものである。

乞食行為は法律で禁止されている

クラウドファンディングと乞食行為の違いについて論じているサイトもあるが、どのサイトを見ても釈然としない。

乞食ではないとする理由で目にするのは、自分の利益を目的とするものではないとするからと言うけど、クラウドファンディングで自分の利益を目的としていないものなどあるのか?という疑問。

明らかにバイクを買うためだとかわかりやすい乞食行為は炎上するものの、パット見で判断できないやつや、微妙なやつは問題とされないのがクラウドファンディングの闇だ。

自分の地元を盛り上げるサイトの運営資金

以前、職場で知り合った人間が、そいつの地元である軽井沢という有名な別荘地を盛り上げるためのサイトを運営する資金をクラウドファンディングで乞食行為しようとしていた。

軽井沢なんて放っといても新幹線で東京からわんさか人が来るし、そいつが乞食行為をしなくても他の営利企業や自治体がきちんとした金で創った応援サイトなんかいくらてもある。

自分でサイトを収益化する事を放棄したり、自己資金で運営することを考えない乞食行為なのは明らかだった。

その後、そいつの乞食行為が成功したとは聞いていないが、こういうことに類似したクラウドファンディングは多いと言える。

性教育関係もクラファンが多い

性教育という社会的なテーマでセンシティブなものは、クラウドファンディングのネタに利用されやすい。

少子高齢化の日本においては過度な性教育はむしろ少子化的によろしくない…と言う、腐れ持論は置いておくとしても、性教育をテーマにする活動になぜ寄付が必要なのか?

最近目にしたのは、性教育関係のフリーイラスト素材配布サイトの運営資金をクラウドファンディングするというもの。

性教育で社会貢献していというのは立派だし、どうぞどうぞ〜と思うが、既存の無料素材サイトで無料で配布すれば目的が達成できることに、主催者も寄付者も激しく気付かないとならない。

それなのになぜ100万円以上もの資金が必要なのか? 自分には理解しかねたのである。

価値のあるものなら商業化すればいい

今回取り上げた2つの例が乞食行為だと思うのは、軽井沢の方は地元なんだし、盛り上げたければ他人の金を使うべきでないし、性教育サイトも社会貢献だけが目的なら既存の無料サイトで配布すればいい。

それか商業的に価値のあるイラストなら、利用者から金を取ればいいのだ。

クラウドファンディングを募る方もそうだが、この手のものに寄付する人間もどうかしている。

金が余っているなら、株など一般的な投資に使ったほうが利益の20%以上も税金を払うことになるし、真っ当な企業の活動も支援できる。

言いたいことは、思考停止せずにお金の使い方を考えよう、ということだ。

WEB制作

【css】iPadやスマホでスクロールすると横にグラグラ揺れる現象の原因と対策

画像はイメージ。横揺れは横幅100%を突き破っているのが原因

レスポンシブのサイトでPCだと何ともないのに、iPadやスマホだとパッと見は問題なくても、縦にスクロールすると妙に横にグラグラ揺れてしまうサイトがある。

今まさにその問題に直面しているなら、原因は大体はっきりしているので安心して欲しい。

原因はレスポンシブの鉄則を守らずに「横幅100%」を突き破っている要素が存在するからだ。

まずデベロッパーツールなりで横幅チェック

サイトを作った時はもちろんだが、サイト運営中でもプラグインや広告など、何かしらの追加や変更で横幅100%超えてしまう場合がある。

デベロッパーツールを使ってipadやスマホの画面サイズをシミュレートしながら、飛び出している要素がないかチェックしよう。%ではなくてpx指定になっているオブジェクトは全体の設計次第では突き破る原因になりやすい。

原点が特定できたら%指定に変えたり、飛び出さないように何らかの対策をして無事完了。

緊急用としては全体にoverflow-x:hidden

原因が特定できないけど、とりあえず何とかしたい場合専用の最終兵器がある。

ページ全体、つまりhtmlや描画される部分全体であるbodyに横幅のはみ出し部分を強制的に隠してしまう方法だ。

cssのコードとしては下記になる。


html {
overflow-x: hidden;
}

body {
overflow-x: hidden;
}

但し、これは最終兵器であってオススメ度は低い。

ページの構造、要素によっては表示や動作に不具合が起きるからだ。ページの中にfixedやstickyなどで固定表示している要素があったり、そもそもデザインが見切れてしまう場合もある。一時凌ぎには良くても、将来のデザイン変更の時などに、これが原因で色々うまく行かなくなる事態も想像できる。

以上の理由から、大幅なデザイン修正が必要な時の時間稼ぎくらいに使うと良いだろう。詳細に実機チェックして問題が出なければ、それはそれで一件落着とも言えるけど。

余談 スマホよりiPadの方が実は厄介

個人的な経験だとスマホよりiPadでこの問題に遭遇しやすい。スマホ向けのCSS設計はシンプルだから、よほどケアレスミスしていないと横幅が超えることは通常ないのだ。

ところが、iPadは横向きにするとPCに近い解像度になる特性がある。iPad向けのサイズを細かく作っていないと微妙なハミ出しが起こるのだ。大企業のサイトなんかでも、スマホとPC向けはユーザーが多いからちゃんと作るけど、iPadはマイノリティだから考慮していない場合も割とある(リクルート社系の某サイトとか)。

Chromeなどのシミュレーターではこの現象は起きないので、実機チェックをきちんとしていないと問題に気づけないというのもある。まさに裸の王様状態だ。

上場企業の某ゲーム攻略サイトなんかでもこの現象が起きていて、「実機チェックしてないんだろうな~」とか「エンジニア寄りで作られていて、デザインの細部に無頓着なんだろうな~」とか思ったりもするのだ。チェック不足や技術力の無さが露呈してしまう。

そんなふうに見ている人に思われないように、横グラグラ現象はできる限りスマートに直したいものだ。制作会社とかでなくて、一般企業だと金のある大手ですら検証用のiPadが制作者に配布されていることは滅多にないしね。改めて思うが、実機チェックは重要だ。