コンテンツ
- 必要な知識：基本的なPHPとCSS
- 必要です：WordPressのインストール、選択したテキストエディタ
- プロジェクト時間： 10分
.netマガジンの印刷版を購読している場合（そうでない場合は、なぜですか！？）、今月号には「WordPressによるレスポンシブデザイン」に関する優れた記事が掲載されていることがわかります。
この記事では、著者のJesse Friedmanが、真に効果的なレスポンシブWebサイトを作成するために、固有のWordPress機能を最大限に活用し、克服するための非常に便利なテクニックの概要を説明しています。 WordPressでレスポンシブサイトを作成することを考えている場合は、間違いなく彼の記事のコピーを入手する必要があります。必読です。
最近、レスポンシブでモバイルファーストのアプローチを使用してWordPressで個人のブログを再構築したので、この記事で取り上げたテクニックのいくつかに精通していました。しかし、私にとって本当に目立ったのは、jQueryを介して流動的な画像を有効にするJesseのアプローチでした。
WordPressと「流体画像」の問題
max-width：100％を使用する「流動的な画像」をご存知だと思いますが、コンテナのサイズに合わせて拡大縮小するには、画像の幅や高さが固定されていない必要があります。残念ながら、WordPressはメディアライブラリから生成された画像のサイズを自動的に計算し、対応する幅と高さの属性をimg>タグに追加します。
これはページのレンダリング速度には最適ですが、 大規模 画像のサイズがコンテナのサイズに制限されなくなったため、レスポンシブレイアウトの作成に関してはスパナが機能しています。
それは問題だ。
非jQueryソリューション
Jesseの記事では、jQueryを使用して、ページが読み込まれた後、ページ上のすべてのimg>タグから幅と高さの属性を削除することを提案しています。これは確かに機能しますが、私のサイトを構築するとき、特に問題のページに多くの画像がある場合、これを実現するためにJavaScriptに依存するという考えは好きではありませんでした。
これがWordPressフィルターが助けになった場所です。
WordPressコーデックスはフィルターを次のように定義しています。
「... WordPressが起動するフックは、データベースに追加したりブラウザ画面に送信したりする前に、さまざまな種類のテキストを変更します。」
結局のところ、これはまさに私たちが必要としているものです。ページにレンダリングされる前の最終アクションとしてすべての画像で実行するフィルターを設定することで、PHPを使用して幅と高さの属性を削除し、JavaScriptを介した（潜在的に）高価なDOM操作の必要性を回避できます。
コード
- /**
- *レスポンシブ画像機能
- */
- add_filter（ ’post_thumbnail_html’、 ’remove_thumbnail_dimensions’、10）;
- add_filter（ ’image_send_to_editor’、 ’remove_thumbnail_dimensions’、10）;
- 関数remove_thumbnail_dimensions（$ html）
- $ html = preg_replace（ ’/（width
上記のコードでは、add_filter関数を使用して2つのフィルターを追加しています。最初の引数はフックするフィルターで、2番目の引数はフィルターが呼び出されたときに実行する関数を指定します。
私たちのコードでは、2つのあいまいな関数にフックします。
- post_thumbnail_html –で取得された画像 post_thumbnail（）
- image_send_to_editor –エディターに追加された画像
次に、正規表現を使用して、画像タグから幅と高さの両方の属性を削除します。これで、画像がブラウザに送信されると、マルコット氏がそうすべきだと言ったように、完全に「流動的」になります。
告白
私は使用するという考えを持っていたことを告白しなければなりません add_filter 属性を削除するために、私は一生の間、フックする正しいWordPressフィルターを見つけることができませんでした。
たくさん検索した後、私はついにNathanielTaintorによるWordpressStack Exchangeに関するこの非常に役立つ投稿に出くわし、必要な2つのフィルターに関する情報を提供しました。
警告
私の知る限り、このアプローチの唯一の大きな欠点は、サイト上のすべての画像から幅と高さの属性が削除されないことです。特にWordPressがコメントで使用しているGravatar画像では、これが問題であることがわかりました。
誰かがこの問題の解決策を持っているなら、私たち全員が利益を得ることができるようにコメントを残してください。
これが有用であり、WordPressWebサイトに「流体画像」を実装するためにJavaScriptに依存する代わりの方法を示したことを願っています。
言葉：デビッド・スミス
Dave Smithは、英国バースの美しい街の近くに拠点を置くフロントエンドデザイナーです。彼が新しくてエキサイティングなウェブプロジェクトに取り組んでいないとき、彼はビッグバンドのジャズグループから交響楽団まであらゆるものでトランペットを演奏しているのを見つけることができます。 Twitterで@get_daveとしてDaveに追いつくことができます。
