そうきたか

技術的なことや読んだ本など雑多にブログを書きます。

WordPressで任意のサムネイル画像サイズを追加・サムネイルを再生成する方法

f:id:ryskit:20161113021259j:plain

WordPressでサイトを作っていると、記事の一覧を表示するときにアイキャッチ画像を表示することが多いと思います。

その際、任意のサイズのサムネイル画像を表示したくなるのが人情です。

この記事では、「任意のサイズのサムネイル画像を生成する方法」とWordPressでサイトを構築して運用し始めた後、新しくサムネイル画像のサイズを追加して再生成する方法をご紹介します。

任意のサイズのサムネイル画像を生成する方法

WordPressで画像をアップロードすると、

  • サムネイル「150 x 150px」
  • 中サイズ「300 x 225px」
  • フルサイズ「600 x 450px」

上記の3パターンで自動的に画像が生成されます。

これはデフォルト設定の場合で、これ以外のサイズで画像をリサイズ・切り出して欲しい場合は少し手を加える必要があります!

といっても簡単で、テーマにある functions.php というファイルに一行加えるだけ。

<?php add_image_size( $name, $width, $height, $crop ); ?>

引数の$nameは、新しい画像サイズの名前を指定します。 $widthは、切り出したいサムネイル画像の幅をピクセル単位で指定します。 $heightは、切り出したいサムネイル画像の高さをピクセル単位で指定します。 $cropは、画像を切り出すかどうか。デフォルトはfalseで、指定の幅または高さに合わせてリサイズ、trueの場合は、指定のサイズで切り抜きます。

参考サイト:

関数リファレンス/add image size - WordPress Codex 日本語版

kotori-blog.com

例えば、functions.phpに以下のように画像サイズを指定したとします。

<?php add_image_size('post_100x100_thumbnail', 100, 100, true); ?>

指定した後、画像をアップロードすると、100x100pxで画像が切り出されます。

100x100pxで切り出された画像を利用する場合は、こんな感じで指定します。 ※ループでpostを回している場合

<?php the_post_thumbnail('post_100x100_thumbnail'); ?>

めっちゃ簡単です!

サムネイル画像を再生成する方法

WordPressでサイトを運用し始めたあと、サイトの改修などでサムネイル画像のサイズを新しく追加してそちらを使いたい場合があります。

そのときに問題になるのが、過去にアップした画像の新しいサムネイル画像をどう生成するのかという問題。

いまからアップロードする画像は指定したサムネイルの画像サイズで生成されるのですが、過去の画像については改めて画像をアップロードするなどしないといけません。

とてもめんどくさい......

でも、WordPressはプラグインが豊富!解決してくれるプラグインがありました!

ja.wordpress.org

使い方もめちゃ簡単!

まず、プラグインの新規追加からregenerate-thumbnailsで検索してインストールして有効化します。

すると、サイドバーのツールにRegen. Thumbnailsと表示されるようになるのでクリックします。

f:id:ryskit:20161113015751p:plain

regenerate-thumbnailsの管理画面に遷移すると、Regenerate All Thumbnails表示されたボタンがあるのでクリックするとサムネイル画像の再生成が始まります。

f:id:ryskit:20161113020618p:plain

これで、functions.phpに追加した新しいサイズのサムネイル画像が再生成されるはずです。

最後に

いかがでしたでしょうか?

僕はあまり使うプラグインを増やしたくない方なので、今回はfunctions.php に一行追加して任意のサイズのサムネイル画像を生成する方法をご紹介しました!

WordPressにはプラグインがたくさんあるので、サムネイル画像のサイズを管理画面から登録できるプラグインとかありそうですよね。 なので、今回の記事でfunctions.phpに書き込むのは抵抗あるなって方はそういうプラグインを探してみるのも楽しそうですね!

では!

商用OK・会員登録の有無などが一発でわかる!フリー素材サイトが簡単に見つかる「素材サイト」をリリースしました。

f:id:ryskit:20160930005806p:plain

フリー素材(写真・イラスト・アイコン)をダウンロードできるサイトが簡単に見つかる「素材サイト」というサービスをリリースしました。

素材サイト

「素材サイト」をつくった経緯

f:id:ryskit:20160930102918p:plain

普段、自分で何かサービスや作品を作ろうとした時に「フリー素材」を提供してくださるサイトで素材や写真をダウンロードして使うことがありました。

その際、素材を検索して探すのですが、検索結果には「◯◯なフリー素材サイト30選」といったような「まとめ記事」がたくさん登場しました。

その記事のリンクから探すことになったのですが、そもそも情報が古くリンク切れになっているものがあったり、その記事を読んだだけでは、そのサイトではどんな素材が手に入り、商用利用は可能なのかどうかダウンロードできるファイルの形式(pngなのかai・psdなのか)は何なのか、など詳細情報がわからないという問題がありました。

最終的には、自分でそのサイトまでいって調べる必要がありました。

さらに困ったのは、海外のサイトだと利用規約やライセンス周りの話は英語で書かれているので、本当にこの写真を使って大丈夫だろうか、ライセンスに引っかかったりしないかと心配になって、使いたかった素材を使うのをやめたりすることもありました。

こういった問題を、少しでも解決できれば良いなと思って作ったのが今回の「素材サイト」というサービスです。

いい作品は、いい素材から生まれる。

いい素材があれば、組み合わせ次第でいい作品は生まれるもの。

素材探しに使っていた時間を、作品をブラッシュアップする時間に使えたら、もっと効率的に世の中にいいサービスや作品が増えるのではないか。

そういった思いでこのサービスを製作しました。

一覧では、

f:id:ryskit:20160930005820p:plain

  • 商用利用が可能かどうか
  • ダウンロードできる形式は何か
  • 会員登録は必要なのか
  • どうやってそこのサイトの素材をダウンロードできるのか
  • どんな素材を手に入れられるのか

などが、ひと目でわかるようになっています。

検索ページ

素材を探す時に、

  • 欲しい素材はAiデータで欲しいな
  • 商用利用な素材がほしい
  • 会員登録は面倒臭いな

など様々なニーズがあるかと思います。検索ページでは、それがプルダウンとチェックボックスで絞り込めて簡単に一覧で探せるようにしてみました。

f:id:ryskit:20160930005845p:plain

カテゴリや小カテゴリ、会員登録の有無、ファイル形式、利用形式、国内・海外のサイトかどうかで絞り込むことができます。

個別ページ

f:id:ryskit:20160930005841p:plain

個別ページでは、大きく3つに分けてフリー素材サイトの紹介をしています。

まずは「どんなサイトか?」です。

素材の種類はもちろんのこと、サイトで配布される素材の特徴、利用規約や禁止事項についての要約を読むことができます。

f:id:ryskit:20160930005837p:plain

次に「サイトの使い方」です。

無料で素材をダウンロードできることはわかったけれど、いまいちどこからダウンロードすれば良いのか分からない、といった問題を解決するため、画像でわかりやすく素材をダウンロードする方法を書いています。

f:id:ryskit:20160930005828p:plain

3つ目に「サンプル素材」です。

そのサイトでダウンロードできる素材を何種類か、画像で確認することができます。そこから自分が求める素材の雰囲気に合うかどうかを、判断できるかもしれません。

f:id:ryskit:20160930005824p:plain

最後に

フリー素材をダウンロードできる素敵なサイトは世の中にたくさんあります。

素材サイトでは世の中にあるまだ一部のサイトだけしか紹介できていませんが、これから頑張って掲載するサイトを集めていこうと思います!

今後は、動画のフリー素材やBGMなどのカテゴリも増やしていくつもりです。まだまだ作ったばかりでサイトも未熟ですが、少しでも多くの方に使っていただければ嬉しいです。

sozai.site

WordPressの検索結果のページネーション2ページ目以降にトップページが表示される

f:id:ryskit:20160920010633j:plain

WordPressの検索結果ページで2ページ目以降がトップページが表示されて悩みまくっていたので、情報共有します。

状況

  • パーマリンクの設定は、数字ベースを設定
  • 検索結果1ページ(http://example.com/?s=)は正しく絞り込んだ数の記事数とページネーションが表示される
  • 検索結果2ページ目以降(http://example.com/page/2/?s=)は、なぜかトップページの2ページ目以降が表示される
  • カテゴリやカスタムタクソノミの一覧ページは、正しくページネーションされる
  • WebサーバはNginxを利用

原因

  • Nginxのlocation / の設定が上手くいっていなかった
location / {
    if (!-e $request_filename) {
        rewrite ^.+?(/wp-.*) $1 last;
        rewrite ^.+?(/.*\.php)$ $1 last;
        rewrite ^ /index.php last;
    }
}

この記事を参考にしました。

最後に

パーマリンクをデフォルト設定にすると検索結果のページネーションも正常に動いていて、ずっとページネーションか設定、search.phpなどコードの記述方法が間違っていると思い、そのようなキーワード関連で調べていたため、一向に解決できない問題でした。

ふと、Webサーバの設定が間違ってるんじゃないかと思って修正すると、パーマリンクが数字ベースでも正常に動作するようになったので、同じような問題で詰まっている人は参考にしてみてください。