HOME  /WordPress(初級)
 /OnePress Image Elevatorのインストールと画像管理の事例
2020年03月27日

OnePress Image Elevatorのインストールと画像管理の事例


 ­メモ

このドキュメントは2016年の初期サイトの時に作成したドキュメントです。

WordPressが全然わからない状態から、とりあえず動く状態まで持っていったやり方を記述しています。

ある程度判っている方は応用編を参照してください。

現在サイトはこの応用編の技術で作成されています。

本サイトは画像を取り込むツールとして『OnePerss Image Elevator』、サムネールの再構築に『Regenerate Thumbnails』を利用しています。

本ドキュメントはこれら画像に関するツールと管理方法について解説しています。

これらの画像データに関して判った事を下記構成で説明させて頂きます

  1. OnePress Image Elevatorのインストールと使い方
  2. WPのメディアの設定と『OnePress Image Elevator』の関係
  3. サムネールを作り直す『Regenerate Thumbnails』とは
  4. 過去の画像データの保管に関する考察

1.OnePress Image Elevatorのインストールと使い方

ダッシュボードの『プラグイン→新規追加』の画面を開きます。
検索画面に『OnePress Image Elevator』を入力し、表示された下記画面から『いますぐインストール』を実行します。

プラグインの有効化を実行します。

以上で、プラグインのインストールが終了しました。

1.使い方

画像を張り付けたい場所にカーソルをセットし『Ctrl+V』を実行するだけです。

しかし画像を取り扱う為には画像サイズの変更と削除方法が必要でここだけ解説します。

2.画像サイズの変更方法

①サイズを変更したい画像を選択してサイズを変更する。

②メニュの編集を選択する。

③表示された下記画面でサイズを切りの良いサイズに調整後、更新ボタンを挿入する。

以上で下記の画像ファイルが作成されます。

・サムネール画像

・フル画像(上記で取り込んだ画像)

・カスタム画像(上記で編集した画像)

3.画像ファイルの削除方法

取り込んだ画像を削除したい事がありますがメディアメニューから探すのは大変です。

①そこで削除したい画像を上記と同様に編集で開き、置換ボタンを挿入します。

②表示された添付画面の詳細画面で『完全に削除する』を実行します。

③戻った画面で削除をクリックする。

以上で、取り込んだ画像ファイルを削除することができます。

2.WPのメディアの設定と『OnePress Image Elevator』の関係

ダッシュボードの『設定→メディア』のディフォルト設定は下記の様になっています。

この状態で、『OnePress Image Elevator』で上記の画像(566×122)をドキュメントに取り込むと、WPのメディアの中に、下記の画像が作成されます。

フルサイズ :566×122(ドキュメントに取り込んだ画像でPNGで保存されます)

・サムネイル :150×122(上記画像を幅150で且つトリミングしたデータ。一覧表示に使われます)

・中画像   :300×65(フルサイズを幅300で縮小した画像)

※大サイズ1024は、基本画像が566しかないので作られません。

しかしOnePress Image Elevatorはフルサイズをドキュメントに直接取り込む為、中サイズ、大サイズを取り込むことはありませんので中サイズ、大サイズの画像を作っても意味がありません。

またサムネイル画像は『過去に取り込んだ画像を他のドキュメントに使いたい場合』に探すための参考情報ですが設定が150×122ですとサムネイルに画像の一部しか表示されない為、探しづらいとの問題が発生します。

 そこで私はサムネールサイズを120×120に変更しています。

img_557e37b64238c

まとめると以下の様になります。

①ドキュメントに挿入する画像は『OnePress Image Elevator』で直接取り込む。

②過去に取り込んだ画像の再利用は、WPの基本機能の『メディアを追加』から画像を探して挿入する。

img_557e327b52e7e

3.サムネールを作り直す『Regenerate Thumbnails』とは

ダッシュボードの『設定→メディア』の設定を変更した時に、今までに取り込んだ画像のサムネイルも新しいルールで再作成したいとのニーズが出てきます。

この時に便利なツールが『Regenerate Thumbnails』で、このフラグインを入れると現在の設定に沿って過去のサムネイルを一括して再作成してくれる便利なツールです。

3-1.Regenerate Thumbnailsのインストール

WPのダッシュボードの『プラグイン → 新規追加』の画面を開きます。
検索画面に『Regenerate Thumbnails』を入力し、表示された下記画面から『いますぐインストール』を実行します。

『プラグインの有効化』を実行します。

以上で、プラグインのインストールが終了しました。

3-2.Regenerate Thumbnailsの実行

ダッシュボードの『ツール→Regen,Thumbnails』を実行します。

下記画面で『Regenerate ALL Thumbnails』ボタンを挿入します。
そうすると、自動で全サムネイルの再作成を実行してくれます。

以上でサムネイルの再作成は完了します。

4.過去の画像データの保管に関する考察

最後に、ダッシュボードの『設定→メディア』の設定で、画像ファイルをどのように管理するのか?の設定です。ディフォルトでは下記の設定になっています。


上記の設定にすると、アップロードした画像は下記ディレクトリに保存されます。
<WordPressのサイト名>→wp-content→uploads→年→月

ネットを調べた結果、年月タイプを推奨する人と、独自管理を推奨する人に分かれています。
私も当初は独自管理の方が過去の画像を探しやすいのでは?と思っていました。

しかし、WPの運用で一番重要になるのはバックアップだ!
投稿データが増えてくるとバックアップ時間が長くなってくる。
その一番の要因は画像データで、年月で管理しておくと、日々のバックアップから古い画像データを省くとバックアップが楽になる。(古い画像データは更新されないので別管理)

との投稿を見つけ、確かにこの考え方が正しいのではないか?と思い、今はディフォルトの年月管理で行っています。
また項番2でも解説したように余分な画像データを作らない。のもこの一環になります。

 

<ドキュメントガイド>

前のテーマ:TinyMCE Advancedにhtmlソースを出力するBOXを作成する。

次のテーマ:WordPress Visual Icon Fontsのインストール方法と使い方

以上でこのドキュメントの説明は完了です。

関連ドキュメントは下記の関連記事一覧から探して下さい。


<関連記事一覧>

「wordpress」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

WordPressをインストールするとディフォルトではサイトURLはドメイン名/WordPressフォルダになります。これをドメイン名だけにする為にSynologyの仮想ホスト機能を使います。本ドキュメントはこの使い方を解説しています。

WordPressの動作環境を変更すると、DBをダイレクトに変更しなければならないケースがあります。このドキュメントはphpMyAdminのエクスポートとインポートを使って修正した事例を紹介しています。

ここではSynoligyサーバを「Hyper Backup」アプリケーションで、Googleドライブにバックアップ/リストアする方法を解説しています。

Synologyを複数台持っている場合は、Synology間でバックアップを相互に持たせる事ができます。ここではその方法を解説しています。

SynologyのMariaDBから、mysqldumpを使ってDBを定期的にダンプする方法と、それを利用してWordPressを過去の時点に戻す方法を解説しています。

フロントページやカテゴリページを使って最終的なメニュ構成を作成する方法を紹介しています。

Contact Form 7では確認用のe-mailアドレスをチェックする方法がありません。このドキュメントはContact Form 7のフィルターフックの機能をfunctions.phpに記述する事によりこれを可能にする方法を紹介しています。

固定ページに必要なのは、読者からの問い合わせを受けるメールフォームです。これを実現する為に『Contact Form 7』のインストールと設定、更にメールを送るためのSMTPとして、『WP-Mail-SMTP』のインストールと設定事例を紹介しています。

カテゴリページの表示を抜粋表示に変更してもこのカテゴリーの何処にどの様なドキュメントがあるか?は良く分かりません。そこで解説ページを固定ページに書き、カテゴリページの表示の時に、この固定ページを表示させる方法を解説しています。

このドキュメントは投稿ページと固定ページの違いや固定ページのプログラム構造を説明し、この固定ページを広幅表示に変更するための具体的カスタマイズ方法を紹介し更に固定ページのタイトルを非表示にする方法も解説しています。

Twenty twelve 投稿ページには各種の一覧ページがありこの表示方法に全文表示と抜粋表示があります。その中で検索ページは抜粋表示ですがそれ以外は総て全文表示になっています。このドキュメントは一覧表示の物は総て抜粋表示にする方法が記載されています。

ヘッダーはWEBサイトの顔になりますがTwenty Twelveのヘッダーは貧弱です。ヘッダーはタイトル、説明及びメニューから構成されており、このドキュメントはこれらをカスタマイズする方法が記載されています。

このドキュメントはウィジェットエリアの考え方とCSSを編集して少し見栄えの良いウィジェットエリアする方法を解説しています。

一般のテキストボックスを使ってPHP/HTMLソースを記述するとhttp画面で正しく表示されない問題が発生します。
このドキュメントはTinyMCE Advancedに整形済みテキスト(preformatted text)を使ったボックスを作成する方法を紹介しています。

このドキュメントはsingle.phpとcontent.phpをカスタマイズし、投稿ページの<前の記事><次の記事>のリンクを削除。メタ情報はカテゴリと投稿日を削除し編集のみとし、最後に記事タイトルの前に更新日をいれ、記事タイトルを装飾した事例です。

Twenty Twelve のフッターには『Proudly powered by WordPress』という文字が出力されます。これを通常サイトの様に『Copyright表現』に変更する方法を記載しています。

本ドキュメントではBreadcrumb NavXTのインストールからそれを表示させる為のheader.php及びCSSの編集方法と表示されたパンくずリストをビジュアルアイコンを使ってよりビジュアルにする方法を説明しています。

アイコンも文字を使ったWEBサイトをよく目にしますが、WPのビジュアルエディタで使えるプラグインが『WordPress Visual Icon Fonts』です。このドキュメントには、インストールの仕方と簡単な使い方を紹介しています。

このドキュメントはTinyMCEのビジュアルエディタとhttp画面を一致させる設定や、見出しや段落等のテキストエリア要素の設定、テキストボックスの新設方法、及び表がビジュアルエディタで利用できる設定等TinyMCEの使いこなす為のテクニックを紹介しています。

このドキュメントはCSSのカスタマイズ編です。内容はTwenty Twelveの画面構成解説、子テーマの作り方、CSSを編集する際の注意点、具体的なCSSカスタマイズ事例。事例はスマートデバイスにも対応させる為に%指定をしています。

本投稿はTwenty Twelveの投稿のカテゴリ設定や文書の作成について事例と注意点を記載しています。

WordPressをインストールする時に、ログインユーザ名を指定しますが、デフォルトのままではブログの表示名も上記ログインユーザ名が使われます。これを変更する方法を解説しています。

WordPressをインストールして、WPのテーマを『Twenty Twelve』決めた次に悩んだのは、ダッシュボードにある『設定』をどの様に設定したら良いか?です。本ドキュメントではこのWEBサイトの設定をどの様にしたのか?を解説しています。

本サイトのWordPressのテーマは、Twenty Twelveで構築しました。本ドキュメントでは何故、このテーマを選択したのか?の背景と設定方法を解説しています。

WordPressのCSSファイルやPHPファイルを編集する為には『UTF-8 の BOM なし』のテキストエディタが必要になります。本稿ではこのサイトで使っているEmEditor Free版の利用事例を紹介しています。

SynologyのWordpressパッケージをインストールする方法を解説しています。

SynologyのNASに日本語版WordPressをインストールするやり方を解説しています。複数のWordPressも同一手法で稼動させることができます。