WEB制作

WEB制作

便利だけど、実は危険なWordPressプラグイン。その対策と考え方について

WordPressで使っているテーマに含まれていない機能を追加したり、細かいカスタマイズしたりする時にお手軽便利なプラグイン。

むしろ、WordPressが人気(これしかない需要とも)なのは、無料で手軽に使えるプラグインが充実していることが最大の理由だと思う。

しかし、実はプラグインというのは時と場合によっては怖いものであることを初心者に向けて、いや、初心を忘れてしまった中~上級者に講釈垂れてみる。

ちょっとしたことでサイトを破壊するプラグイン

WordPressというのはプログラムで動いていて、プラグインというのもまたプログラムで動作している。

WordPress自体のバージョンや、PHPなどのサーバーの環境、使っているテーマ、個別のカスタマイズ状況やプラグイン同士の組み合わせなどによって、動作したりしなかったり、また不具合が出たり、挙動が予想できないのがプラグインの怖いところ。

何かトラブルが起きてもWordPressのプログラム的な構造や、プラグインのプログラム的な動作を把握していないとならない。

いや、そういうのをすっ飛ばして素敵な機能をワンタッチで使えるからプラグインを使っているのであって、大抵の場合はプラグインに動作不具合が出たり、その影響でWordPress自体の動作がおかしくなっても自己解決などできないだろう。

これはプラグインを導入した時だけでなく、更新したり、一度いれたプラグインを削除した時にも起こる。プラグインに何らかの手を入れるときは、事前に慎重にバックアップを取るなりしておくのが大事だが、バックアップがあっても復旧できるかどうかは別問題だったりする。

まして、個人レベルのWorDPressブログなんかでは、かなりプログラムに詳しい人でないとテスト用の開発環境が別にあったりすることも少ないはずなので尚更だ。

プラグインはサイトの表示を遅くする

手当たり次第にプラグインをぶち込むと、様々な機能が使える一方でサイトの表示速度は低下する。

WordPress自体がそんなに高速をウリにしたCMSではないが、元々のテーマに含まれている機能なら制作者がチューニングしているものの、手あたり次第にプラグインをぶち込んだサイトだと、同じような機能がバッティングすることもあるかもしれないし、表示速度が目に見えて遅くなるだろう。

プラグインを大量にぶち込むなら有料テーマもおすすめ

WordPressの魅力はプラグインで好きな機能を簡単に追加できることだ。しかし、そこにはそれなりのリスクと表示速度のトレードオフという問題が潜んでいる。

そういった場合にオススメなのは、初めからブログ運営に必要な機能が大体内蔵している下記のような有料テーマを使うことだ。




国内最高峰の SEO 最適化 WP テーマ 【ザ・トール】

無料テーマではほとんど提供されていることがない「サポート」があったり、デザイン面も整合性が取れているので、CSSなどに詳しくない初心者なら、なおさらオススメだ。

余談 企業サイトではWordPressは滅多に使われない

個人ではWordPressは非常によく使われていると。無料という意味では他に選択肢がないというのもある。

しかし、中小企業などを除けば、大手企業のブログ、オウンドメディアではWordPressは滅多に使われることがない。

「大企業だから大金が払える」というのも理由だが、毎日、数万~数百万くらいPV数があったり、個人情報を扱っていたりすると、出所のわからないフリーのプラグインはセキュリティや安定性の懸念から企業の判断として使えないからだ。

あまり一般のブロガーなどには知られていないが、企業向けのCMS製品は多数あって、それらを年間数百万円くらい、エンジニアの給料で年間1千万円とかで運営しているのが企業のオウンドメディアなのだ。

以前、勤めていた会社がそうだというだけだけど、WordPressのプラグインに絡めて紹介してみた。

WEB制作

【CSS】:first-childや:last-childを使うと最初の要素や最後の要素だけ違う値を設定できて便利

HTMLの要素の中でも、あるClassの中にある最初の要素だけとか、最後の要素だけを別のmarginやpaddingにしたいということは、デザインを作り込んでいくとよくある。

特に、WordPressなどCMSのサイトだと、こういうテクニックを使う場面が多い。

LPとかの静的ページだとそんなにないかもしれないが、商品サムネイルを分類別に大量に載せてたりすると、個別に設定するより仕事が楽だったりする。

使い方は意外と簡単

CSSの割に「最初だけ」とか「最後だけ」みたいな条件分岐があったりと少しプログラミングっぽいけど、何のことはない、超簡単に設定できる。

上記みたいにcatという親要素のクラスがあるとする。

Aの子猫(最初の要素)だけ違う値にしたいなら、
.cat::first-child
と記述するだけだ。あとはいつものように値を書いていく。

同様にBの子猫(最後の要素)だけ変えたい場合は、
.cat::last-child
とする。

コロン(:)はCSS2の時代は1つで、今のCSS3では2つにするのがルール。古いブラウザに対応させるなら1つだけど、どっちでもいいと言えばどっちでもいい(適当)

疑似クラスを使うデメリット

そんなにないと思うけど、あくまでCSSで人間向けにデザインをいじっているだけなので、プログラム(検索エンジンとかAPIとか)からは元のHTMLが参照される。

疑似クラスは中~上級者向け(たぶん)なので、職場とかチームでいじるサイトだと、初心者には理解不能な場合があるので注意することくらい。

疑似クラスを使わない場合より、構造が少しややこしくなってメンテナンス性が下がるのは間違いない。

余談 疑似クラスという言い方が微妙

こういうのを疑似クラスというけど、言い方(呼び方)が微妙だなと感じる。似ているものに疑似要素っていうのもある。

英語だとpseudo-classというけど、pseudoの意味は「偽物の、まがいの、ペテンの」と何だか酷いキーワードばかりだし。臨機応変クラスとか、自動差し替えクラスみたいなイメージかな。

WEB制作

【2021年】Firefoxに対応していない企業サイトはクソ、と言ってみるテスト

Web制作者たるもの、Web制作時の動作検証においては、より厳密なコーディングを求めるFirefoxだろ! と思いつつも、最近はそれなりの企業サイトで明確にFirefoxを動作対象外にしている。

いや、使っている人が少ないなら制作効率の面で動作検証の対象から外すというのはわかるけど、初めから自動でコード補完してくれるChromeを標準に作るのは色々と危険じゃないかって話。

Firefoxを対象外にしているサイト例

Firefoxだと最後の最後でエラーになるピーチ航空

例えば、LCC大手のピーチの予約サイトとか。Firefoxだと予約画面の最後の最後の支払いで動作対象外だからと決済できなかったりする(記事執筆時)。

そのため、いちいちChromeを起動してログインして、路線や日付を入れて検索するところからやり直す・・・というのをしないとならない。どうして最初の画面で弾いてくれないのか不親切すぎて泣けた。しかも数カ月後に忘れたころにまたFirefoxで決済しようとして、同じエラーでやり直す始末。最悪のユーザーエクスペリエンスだ。

リクルートのサイト各種や、マイナビというリクルートの真似ばかりの就職情報会社のサイトもFirefoxは対象外だという。デザインが崩れていたりしても、まともなデザインナーはFirefoxでも検証するはずだけど、きっぱりと対象外なんだという。

Chromeが使いにくいところ

リクルートでは今時スマホにも劣るRAM4GBのVDIのクソスペックPCを使っていたりするが、ああいうウルトラ低スペックPCだとChromeは断トツで動作が軽いといか速い。しかし、ある程度まともな普通のPCだとブラウザか何であっても速い。昔のIEとかを別にすれば。

Chromeもプラグインだとかでカスタマイズすればできるのかもしれないけど、今のPCで当たり前な16:9とかの横長のモニターでは、Firefoxとかでは当たり前にできるサイドバー形式のブックマークが出せないのが痛い。痛すぎる。

Chromeは上部にフォルダ的にブックマークを設置しているデザインだが、画面比率の有効活用というのをわかっていない。

Googleのブラウザだけに、圧倒的に色々な行動履歴がGoogleに収集されている可能性もあるし、Chromeを標準にする企業の風潮には賛同できない。今のメジャーブラウザだと、Firefoxが一番、Webらしいオープンで中立な高性能ブラウザだと思う。

わけわからんバグや頻繁なバグフィックス的なアップデートはウザいけどね。