利用中のメインのワードプレスは、ここ_ですが、アイキャッチ画像を積極的に利用するにあたって、以下の理由で不満でした。(英語版WordPressでは:featured image)



本ページのアイ・キャッチ画像（英語版WordPress:featured image）参照元を見る。利用に感謝！

  1. 画像サーバーである flickr.com を利用したいが、ワードプレス標準機能では flickr.com を利用できない。 flickr.com を利用する理由：
    1. 美しい大容量オリジナル（サイズ）の静止画が flickr.com で大量に公開されている。
    2. 最初から複数の大型（サイズ）から小型（サイズ）までの静止画が flickr.com で準備され公開されている。
    3. ワールドワイドな中継サーバーによるキャッシュ化高速レスポンスを flickr.com では実現している。
  2. ワードプレス領域の「メディア」「ライブラリー」を公開したくない。
    wp-content/uploads
    理由は大容量オリジナル（サイズ）の静止画を保存したくない。何故なら、ワードプレス用のサーバーの負荷負担を無駄に消耗させたくない。ワードプレス用のサーバーのレスポンスを最高速のままに維持したい。 早急に「ライブラリー」下の画像データーは完全に削除する！
    あなたは気付いていますか？！ グーグル画像検索_で、あなたの WordPress/ wp-content/ uploads/* の画像を直リンクで、さんざん利用され続けている。
  3. 静的データー保管専用のミラーリングした専用データーサーバーを利用したい。
    flickr.com で公開されている素晴らしい静止画には作者の権利があって、その権利を保証しないといけないが、自分が作成した静止画像の場合、 flickr.com にアップして公開したくない場合に、コピーサイトからの流用を拒否できる自分専用の静的データー保管専用のミラーリング（ＤＮＳラウンドロビン）した専用データーサーバーにアップロードしてアイキャッチ画像に利用する。ワードプレス標準機能では外部のURLを利用できない。
    参考：
    「マイドメインを取得し、
    ２台以上のＷＥＢサーバー(エクスリア)を申し込むなら、
    ＤＮＳラウンドロビン    _」
以上の不満を解消する目的で、「個別記事では外部URLによる豪華な静止画像をアイキャッチ画像運用する！」が、「トップページでの複数記事の表示では１５０ピクセル矩形の軽量静止画像を外部URLによるアイキャッチ画像運用し高速表示させる！」為に、プラグインの利用と、テーマのハッキング_（以後ハックと称す）手順とサイドバー・メニューの「最近の投稿」のハックを、自分用に記録しておきます。

プラグインの試行

ワードプレス用プラグイン： Featured Image from URL_ 作者: Marcel Jacques Machado 試行的に導入削除しました。
ワードプレスに関わるプラグインも、積極的に更新されます。更新によって不具合が出た段階で、古いバージョンに戻すか、他の類似プラグインに交換する必要があります。このプラグインが未来で改訂されても不具合が出ないように、このプラグインに影響されないテーマに対してハックしましょう。ワードプレス・サポート・フォーラムで作者と問答_してみましたが、プラグインでの更新を期待しないで、独自にテーマで処理します。

2020/06/01 : 問題が起きましたので削除しました。 実際の手順は停止させ、新しいプラグイン： Featured Image by URL を導入し、新しいプラグインをスタートし、停止させたプラグインを削除しました。 FACEBOOK_


プラグインの設定

Featured Image from URL の、オプション「 Performance 」の「 Lazy Load 」のみをＯＮにしました。他は一切変更しません。これは極力プラグインの特殊性を利用しない為です。 2020/06 プラグインは削除され、別の同類プラグインを採用しています。 別のプラグイン「Autoptimize」で Lazy-load images 機能を利用しています。

テーマのハック

wp-content/themes/lovecraft/ content.php をハックします。
  1. 利用中のワードプレスのテーマ： Lovecraft is a beautiful two-column WordPress theme for bloggers. by Anders Norén._
    どのテーマでも良い訳ではありません！ 利用するテーマが、 featured imageを、サポートしていること！ 作者に問い合わせましょう！
  2. ハック後の content.php を GitLabで公開_しています。現在の仕様の限定は、外部URLとして、 flickr.comを想定しています。 flickr.com以外を利用する場合には改良が必要です！ flickr.com以外を想定し、フォルダー名を自動的に変更するアイデアを採用しました。サイドバーの最近の投稿_を参照願います。
    1. 10行目： class に NoThankYou2020 を追加
      自動的に「新しいタブで開く」リンクを生成させない為の認識ですので、普通は無用です。
      参考：
      「公開スクリプトを定義するだけの簡単さで全ての記事のリンクを改良しよう！_」
    2. 10行目： #post-<?php the_ID(); ?> を追加
      豪華な画像を飛び越した位置決めを行う。但し古いブラウザーでは機能しない。 MS-Windows7 IE11 では、IDに位置決め出来ない！
    3. 13行目： if( get_post_custom_values( 'img150x150' ) !== null )
      カスタムフィールド設定済みかを判断する
    4. 14行目： $URLflickr = get_post_custom_values( 'img150x150' )[ 0 ];
      変数$URLflickrに手動で定義したカスタムフィールドを定義する。
    5. 15行目： $URLflickr = get_the_post_thumbnail_url() ;
      アイキャッチ画像のURLを定義する
    6. 17行目： if( stripos( $URLflickr , 'flickr.com' ) !== false ){
      URLに flickr.com を含むかを判断する。カスタムフィールドに指定したURLも判断することとなる。
    7. 18行目： $URLflickr = preg_replace('/_.\./','_q.',$URLflickr);
      先頭から検索し置換している。サイズ150x150ピクセルのURLに置換させる。
    8. 19行目： echo '<img onerror="this.onerror=null; this.width=0; this.height=0; this.src=&#39;//miroir.fs4y.com/motpressevotrespac/images/Savior.gif&#39;;" src="',$URLflickr,'" alt="" align="left" width="150" height="150" style="margin:0 10px 0 0;" />';
      画像が存在しない場合の処理を付加して画像を表示させる。関数 ONERROR の指定は重要です。
      参考：
      「アフィリエイト画像のリンク切れ対策を必ず行います！_」
    9. 21行目： // the_post_thumbnail( 'post-image' );
      このコードが初期値です。大きなサイズのアイキャッチ画像を扱うだけなのでコメント・アウトします。
    10. 22行目から27行目で画像の緒言を定義します。
      但し、従来の標準的なアイキャッチ画像の定義の場合に利用されます。
    11. 29行目： the_post_thumbnail( 'thumbnail' , $myEyeCatch_attr );
      従来の標準的なアイキャッチ画像を thumbnail : 150 x 150 で表示させます。
    12. 45行目： <div align="right" style="margin-right:10px;">
      右端に寄せています。

ハック前のワードプレス

同じプラグインと同じテーマでありながら、ハッキングを行っていないワードプレスを紹介します。テーマやプラグインの更新を先行して実験するワードプレスです。２つあるのは、英語版と日本語版です。テーマやプラグインの更新を行っても問題が起きないことを確認し、メインのワードプレスを更新し、色々と特別なハックを行って、逐次、この２つのワードプレスにもシステムを転送しますので、過渡期として同じ動作をする時期があります。

ハック後のワードプレス

テーマの運用

  1. 今後はワードプレスの運用サーバーに静止画像をアップロードしない。しかし、既存の古い投稿記事のアイキャッチ画像は、ワードプレスの運用サーバーに静止画像をアップロードしてしまっている。放置するも良し、ワードプレス標準機能のアイキャッチ画像の定義を削除し、ワードプレスの運用サーバーにアップロードした画像ファイルを完全削除すれば、より高速なレスポンスに至る可能性がある。
    わたしのWordPress/ wp-content/ uploads/ .htaccess
    自分が所有するドメイン全てと、自分の異種ブログなどのみからの接続のみを許可する。画像などを削除出来れば、.htaccessを簡素化出来る。
    あなたは気付いていますか？！ グーグル画像検索_で、あなたの WordPress/ wp-content/ uploads/* の画像を直リンクで、さんざん利用され続けている。
  2. 投稿記事のアイキャッチ画像の定義を削除するか、最初から指定しないで、プラグイン： Featured Image from URL に、豪華な flickr.com の公開画像のURLを埋め込む
  3. flickr.com のサムネイル画像サイズ：150px x 150px のURLが特殊な場合がある。
    その場合はカスタムフィールド、 key ： img150x150 に、URL情報を設定する。
  4. flickr.com 以外の豪華な画像URLを指定したい場合は、 150px x 150px の画像を用意して、カスタムフィールド、 key ： img150x150 に、URL情報を設定する。

サイドバーの最近の投稿

わたしのメインのWordPress_では、サイドバー・メニューに「最近の投稿」を配置していないのですが新たに配置しましたし、わたしの他のWordPress_では、サイドバー・メニューに「最近の投稿」を配置しています。その場合のハックをGitLabでオリジナルからの差分情報として公開_しておきます。
wp-content/ themes/ lovecraft/ widgets/ recent-posts.php
2019/08/19 任意の自分専用のデーター・サーバーにアップロードした画像の運用を模索した例をGitLabでオリジナルからの差分情報として公開_しておきます。追加したのは７６行目から７８行目です。
  1. ７６行目： }elseif( stripos( $URLflickr2 , 'miroir.fs4y.com' ) !== false ){
    miroir.fs4y.comを含むＵＲＬの場合に処理されます。みなさんのサーバーと読み替えてください！
  2. ７７行目： $URLflickr2 = preg_replace('/_.*\//','_75x75/',$URLflickr2);
    ディレクトリー（フォルダー）変換を目指しました。
    _75x75/の名前のディレクトリー（フォルダー）に変換します。
    つまり、例えば親フォルダー名がABC_ZZ/だったとして、ABC_75x75/やABC_150x150/に自動的に振り分けられます。ワードプレス用プラグイン： Featured Image from URL_に登録するＵＲＬは、親フォルダー名がABC_ZZ/下の画像のみです。勿論、同じ画像のファイル名として、親フォルダー名がABC_75x75/やABC_150x150/にもサイズだけが異なる画像が必須ですよね。
同じように、content.phpのハックも、_150x150/の名前のディレクトリー（フォルダー）に変換します。
$URLflickr = preg_replace('/_.*\//','_150x150/',$URLflickr);

応用Ａ

《問題》： 以下を想定しましょう。
  1. AnimationGIFである拡張子ＧＩＦをワードプレス用プラグイン： Featured Image from URL_に登録するとします。
    //live.staticflickr.com/65535/48557070632_411391d886_o.gif
  2. 150x150は拡張子ＪＰＧの静止画を採用するとします。
    //live.staticflickr.com/65535/48557070632_5c69bba435_q.jpg
  3. 75x75は拡張子ＧＩＦのAnimationGIFを採用するとします。
    //miroir.fs4y.com/motpressevotrespac/images/FeaturedIimage/ORG_75x75/BBP.gif
《解答》：
  1. カスタムフィールド(英語版： Custom Field): img150x150に以下のＵＲＬを定義する
    //live.staticflickr.com/65535/48557070632_5c69bba435_q.jpg
  2. カスタムフィールド(英語版： Custom Field): img75x75に以下のＵＲＬを定義する
    //miroir.fs4y.com/motpressevotrespac/images/FeaturedIimage/ORG_75x75/BBP.gif
  3. ワードプレス用プラグイン： Featured Image from URL_に以下のＵＲＬを定義する
    //live.staticflickr.com/65535/48557070632_411391d886_o.gif

応用Ｂ

《問題》： 以下を想定しましょう。
  1. AnimationGIFである拡張子ＧＩＦをワードプレス用プラグイン： Featured Image from URL_に登録するとします。
    //miroir.fs4y.com/motpressevotrespac/images/FeaturedIimage/ORG_ZZ/EnableCookiesInYourBrowser.gif
  2. 150x150もAnimationGIFである拡張子ＧＩＦを用意しました。
    //miroir.fs4y.com/motpressevotrespac/images/FeaturedIimage/ORG_150x150/EnableCookiesInYourBrowser.gif
  3. 75x75もAnimationGIFである拡張子ＧＩＦを用意しました。
    //miroir.fs4y.com/motpressevotrespac/images/FeaturedIimage/ORG_75x75/EnableCookiesInYourBrowser.gif
《解答》：
  1. カスタムフィールド(英語版： Custom Field): img150x150には何も定義しない！
  2. カスタムフィールド(英語版： Custom Field): img75x75には何も定義しない！
  3. ワードプレス用プラグイン： Featured Image from URL_に以下のＵＲＬを定義するだけ！
    //miroir.fs4y.com/motpressevotrespac/images/FeaturedIimage/ORG_ZZ/EnableCookiesInYourBrowser.gif

参考記事など

過去記事：「flickr.comの体制変化に対応できる範囲で対応しよう！_」
「JavaScript変数化するマクロ・スクリプト_」
Resize animated GIF_
Change GIF loop count_
Optimize animated GIF_

次のステップ？

WordPress featured VIDEO from url_

サポートが必要ですか？


Support AIt's free and fastSupport BIt's free and fastSupport CIt's free and fast

「無料サポート」に興味があれば
上の丸ボタンをクリック願います。
サーバーから9kbを受信しますのでお待ち願います。

※ 記事本文は別サーバーから JavaScriptファイルとして配信しており、配信元のサーバーにおける JavaScriptファイル(YUICOMPRESSOR済み)も、実際にあなたのブログが受信する gzip圧縮済みの JavaScriptファイルも、３０日間のキャッシュ流用を定義していますので、特にご質問の前にブラウザーのキャッシュを削除してから、再度のご訪問と閲覧をお願い致します。
※ DISQUSについては別管理ですので、毎回、最新のDISQUSを表示できています。 但し、ご自分のDISQUSコメントを編集した直後に編集後の内容に至らない場合がありますが、DISQUS表示の上部にある「あなたの言語でDISQUSメニューを再表示する！」をクリックしますと最新の状況を表示致します。 宜しくご理解願います。
※ どれだけ待ってもDISQUSが表示されない場合は「広告ブロック」機能を切ってみて下さい。
Google Translator.

良いブログと利用できないブログ


  • CLICK!