読者です 読者をやめる 読者になる 読者になる

ショウジンブログ

Learn as if you will live forever, Live as if you will die tomorrow.

Vimをインストール@XSERVER

f:id:showjinx:20160721133008j:plain

GUIを必要としない(マウス操作が不要でキーボードのみで操作できる)高機能なテキストエディタ「Vim」をXSERVERで使えるようにします。

Vim - ウィキペディア
https://ja.wikipedia.org/wiki/Vim

Vimのソースをダウンロード

リポジトリをみて最新版を確認します。

ftp://ftp.vim.org/pub/vim/unix/

7.4が最新版(2016年7月21日現在)のようなので、これ(vim-7.4.tar.bz2)をダウンロードします。(ターミナルでssh接続してコマンドラインで操作します)

$ mkdir ~/tmp
$ cd ~/tmp
$ wget ftp://ftp.vim.org/pub/vim/unix/vim-7.4.tar.bz2
$ tar jxvf ./vim-7.4.tar.bz2

それぞれのコマンドの意味は

mkdirコマンドでホームディレクトリにtmpディレクトリ(一時的なファイル保管場所)を作り、このディレクトリにcdコマンドで移動。

先ほどftpのリポジトリで確認したソースファイルを指定してwgetコマンドでダウンロード。

ダウンロード完了したらtarコマンドにオプションつけて、ダウンロードしたソースファイルを指定して展開、です。

これで圧縮ファイルが展開され「vim74」というディレクトリが出現します。

パッチをあてる

パッチファイルを以下のURLで確認します。

ftp://ftp.vim.org/pub/vim/patches/

必要なパッチはVimのバージョン7.4向けのものなので、上記URLの一番下のほうにある「7.4」というディレクトリをクリックします。

遷移先で「7.4.001」から始まる各パッチファイルが何番まであるか確認します。今回は末尾のパッチファイルが「7.4.999」だったので、これを指定してダウンロードします。

$ cd vim74
$ mkdir patches
$ cd patches
$ curl -O 'ftp://ftp.vim.org/pub/vim/patches/7.4/7.4.[001-999]'

cdコマンドで展開したvimのソースファイルがあるディレクトリに移動。そこでパッチ用のディレクトリ「patches」を作成。このディレクトリに移動し、今度はcurlコマンドを使って必要なパッチを全てダウンロード。

999まであるので、けっこう時間かかります。しばらく放っておいて他のことをするかお茶でも飲んで待ちます。お茶の場合は5杯くらい飲めちゃうかもしれません。

全てのパッチファイルをダウンロードしたら、いまいる階層からひとつ上(patchesがあるvim74)に移動し、catコマンドにオプションをつけてパッチをあてます。

$ cd ../
$ cat patches/7.4.* | patch -p0

vim74の中にあるsrcに移動してコンパイルします。

$ cd ./src
$ ./configure --enable-multibyte --enable-xim --enable-fontset --with-features=big --prefix=$HOME

エラーがでました。ライブラリが足りないということです。

no terminal library found checking for tgetent()... configure: error: NOT FOUND! You need to install a terminal library; for example ncurses. Or specify the name of the library with --with-tlib.

「for example」で示している「nurses」をインストールすることにします。

tmpディレクトリに移動してwgetでソースを取得、tarで展開します。(リポジトリを見る6.0が最新版だったのでこれを指定)

$ cd ~/tmp
$ wget http://ftp.gnu.org/pub/gnu/ncurses/ncurses-6.0.tar.gz
$ tar zxfv ncurses-6.0.tar.gz

展開したらnursesのディレクトリに移動してインストールします。

$ cd ncurses-6.0
$ ./configure --prefix=$HOME
$ make
$ make install

nursesがインストールできたら再度vimをインストールします。(重複するので既出のコマンドの説明は割愛します)

$ cd ~/tmp/vim74/src
$ ./configure --enable-multibyte --enable-xim --enable-fontset --with-features=big --prefix=$HOME --with-local-dir=$HOME
$ make
$ make install

今度はインストール完了できました。

vimコマンドを打って確認します。

$ vim

f:id:showjinx:20160721132821p:plain

Vimの起動を確認出来ました。

Vimのセットアップ

自分に使いやすいように設定ファイルやプラグインを用意します。

詳しくは別に投稿しました。

blog.showzine.co

sshでXSERVERに接続する@XSERVER

f:id:showjinx:20160720141411j:plain

XSERVERにSSHで接続しファイル等の操作をします。

私の場合、開発速度向上の意味でもサーバー上のファイルを直接編集することが多いので、SSHで接続し、Vimを使ってファイル編集をします。

*この例ではMac OSXのターミナルを使用してコマンドによる操作を行います。Windowsの場合には同様の操作が出来るターミナルアプリケーションを使います。

SSH接続を有効にする

サーバーパネルにログインします。この場合、対象はXSERVERで利用しているアカウントが対象なので「設定対象ドメイン」を選ぶ必要はありません。

サーバーパネルにログインしたら「SSH」の「SSH設定」から設定画面に進みます。

f:id:showjinx:20160720140839p:plain

遷移先の画面にある「SSH設定」というタブで状態が「OFF」になっているので、「変更」のところで「ONにする」ボタンをクリックします。

f:id:showjinx:20160720140859p:plain

これでSSHが使える状態になりました。

無効化する場合には同じ操作で「OFFにする」をクリックします。

公開鍵認証について

XSERVERのSSH接続は公開鍵認証にのみ対応しています。 パスワード認証には対応していません。

そのため、XSERVERで利用しているサーバーに公開鍵を登録します。

  • サーバー上で公開かぎ認証用鍵ペアの生成を行う
  • 自分で作成した公開かぎを登録

上記の二つのやり方があります。今回は「サーバー上で」の方法を選択してみます。

サーバー上で公開かぎ認証用鍵ペアを生成する

サーバーパネルから再びさきほどの「SSH設定」の画面に進みます。

「公開鍵認証用鍵ペアの生成」タブをクリックします。

f:id:showjinx:20160720140938p:plain

パスフレーズを入力し、右下の「公開鍵認証用の鍵ペア生成(確認)」ボタンをクリックします。(パスフレーズはあとで使いますのでメモ、保存しておきます)

確認画面に切り替わるので、そのまま右下の「公開鍵認証用の鍵ペア生成(確定)」をクリックして確定します。

すると鍵ペアの生成処理を実行した旨の画面が表示され、そのまま自動的に秘密鍵のダウンロードになります。ローカル(SSH接続に使用するパソコン)の任意の場所に保存します。

この例ではユーザーのホームディレクトリ上に隠しディレクトリとして「.ssh」を作成し、その中にダウンロードした秘密鍵を「id_rsa」とリネームして置きます。

「.」から始まるファイル、ディレクトリは通常は見えないので、この操作はMac OSXのTerminal(ターミナル)で行います。Windowsの場合にはPuTTY等のターミナルアプリケーションを使います。

$ mkdir ~/.ssh
$ mv サーバーID.key ~/.ssh/id_rsa

1行目のコマンドでユーザーフォームに「.ssh」ディレクトリを作成。2行目のコマンドでダウンロードした秘密鍵を.sshに移動し、ファイル名を「id_rsa」にリネームしています。

このときに合わせてこのディレクトリ(.ssh)とファイル(id_rsa)のパーミッションも変更しておきます。

$ chmod 700 ~/.ssh
$ chmod 600 ~/.ssh/id_rsa

1行目のコマンドで.sshを700に、2行目のコマンドでid_rsaを600にしています。

これで認証のための鍵ペアの準備は出来ました。

SSHでサーバーに接続してみる

ターミナルを使って以下のSSHコマンドで接続します。

$ ssh -l サーバーID -p 10022 サーバーID.xsrv.jp

Are you sure you want to continue connecting (yes/no)?

と聞かれるので「yes」とタイプします。

すると「SSHキー“id_rsa”のパスワード入力してください」というダイアログウィンドウが出るので、鍵ペアを作ったときに入力したパスフレーズを入力します。

これでSSH接続出来ました。試しに「ls」コマンドを打ってみると、格納しているサイトのドメインごとのディレクトリ(ドメイン名がその名称)が確認出来ます。

最初の接続で鍵認証が済んでいるので、以後は接続のコマンドだけで繋がります。(毎回パスワードを入力する手間はありません)

以上です。

Vimをインストール

そして、これが本当に叶えたかったことです。

blog.showzine.co

無料で独自SSLを導入する@XSERVER

f:id:showjinx:20160719153411j:plain

レンタルサーバー「XSERVER」で独自SSLが無料で提供されるようになったので導入してみました。

GoogleがWebサイトのSSL暗号化通信に対応しているか(httpsプロトコルによる通信)を検索順位の評価対象にするという発表もありますので、これまでは費用面で見送っていましたが、これを機会にXSERVERを使っている方は導入するとよいでしょう。

このSSL証明書を設定すれば、XSERVERで運用しているドメイン、サブドメインは

  • 無料
  • 無制限

でSSL化できるとのことです。一度設定すれば、自動的に有効期限が更新されるということで、導入後の負担もないのがありがたいです。

XSERVERではこの無料のSSL証明書を「Let's Encrypt」として提供し、有料のものはこれまでどおり利用できるとのことです。有料のものは「オプション独自SSL」と分けて存在し、XSERVERの「Let's Encrypt」以外のSSL証明書のブランドを希望する場合には「オプション独自SSL」を申し込むということです。

XSERVERのLet's Encryptを設定する

XSERVERの「サーバーパネル」にログインします。

複数のドメインを運用している場合には対象ドメインを指定して切り替えます。

f:id:showjinx:20160719152812p:plain

対象ドメインのコントロールパネルに切り替わったら「ドメイン」メニューから「SSL設定」に進みます。

f:id:showjinx:20160719152826p:plain

「SSL設定」の画面に進んだら、タブメニューの中から「独自SSL設定の追加」を選んでクリックして進みます。

f:id:showjinx:20160719152851p:plain

遷移先で「設定対象ドメイン」の欄に対象のサイト(ドメイン)が確認出来ます。

選択メニューには「www」のサブドメインがついたものが表示されていますが、wwwがない場合にはAレコードを指定してwwwを追加します。(XSERVERではデフォルトでwwwが作成されているので、あとで削除していなければそのままで問題ないかと思います)

ちなみに、wwwをAレコードに持っていないとこの無料SSLは利用できない(エラーがでる)ようです。

f:id:showjinx:20160719152910p:plain

右下の「独自SSL設定を追加する(確定)」をクリックすると処理中のメッセージが表示されるので、待ちます。

f:id:showjinx:20160719152927p:plain

設定が反映されるまで「最大1時間程度かかります」とあるので、1時間待ってから確認します。

*この手順だとルートドメインだけが対象なので、サブドメイン(www以外の)がある場合には、別途「独自SSL設定の追加」から追加します。

SSL化出来ているかテストする

「QUALYS SSL LABS」というサイトにテストに使えるサービスがあるので、これを利用しました。

SSL Server Test (Powered by Qualys SSL Labs)

「Hostname」のところにドメイン(プロトコル不要、ドメインのみ)を入力してSubmitをクリックします。

テスト結果が表示されるまでちょっとかかりますので待ちます。

結果を確認すると

  • Issuer:Let's Encrypt Authority X3
  • Revocation status:Good (not revoked)
  • Trusted:Yes

といった項目でSSL証明書を持つ(期間も有効で失効していない)Webサイト(ドメイン)として承認されていることがわかります。

初めて知りましたが「Let's Encrypt」というのは、Webでセキュアな通信(httpsプロトコル等)を普及することを目的としているプロジェクトで、非営利団体が運営しているんですね。

letsencrypt.jp

これで独自SSL化の作業は完了です。

お問合せフォーム等、SSLによる暗号化通信が必要、好ましい場合には「https」を指定、設定を変更します。

httpからhttpsに切り替えたことで画像等の読み込みやファイルへのリンクパスが切れてしまい対応が必要な場合には以下が参考になるかもしれません。

blog.showzine.co

WordPressをSSL化する場合

既存サイトですでにWordPressを運用している場合。ここまでの作業だけではWordPressのSSL化は完了しません。別途作業が必要です。

WordPressの独自SSL化についてはこちらを参照ください。

blog.showzine.co

WordPressでhttpsプロトコル通信(独自SSL)を有効にする@WordPress

f:id:showjinx:20160719151659j:plain

WordPressでコーポレートサイト等を運用している場合は独自SSLを導入したらWordPressサイト全体も暗号化通信(httpsプロトコルによる)に対応したほうがいいと思いますが、たんにブログだけで利用しているような場合には必ずしも必要ではないかもしれません。

*Googleが暗号化通信に対応しているかどうかを検索順位の評価項目に追加しているという情報もあるので、そのへんの関係で必要な場合にはやはり対応したほうがいいでしょう。

最初からなら別ですが、途中からhttpsに切り替えるのは難しくないですが、けっこう手間がかかって面倒なので、そのへんを秤にかけて判断するとよいかと思ってます。

そして本題です。

WordPressを常時SSL対応にするのに必要なポイント

利用しているサーバーですでにSSL証明書を取得していることが前提です。

最近(2016年6月30日発表)、レンタルサーバーのXSERVERさんが無料で使える独自SSLサービスを始めました。手軽に導入出来るということでは大変ありがたい、便利だと思います。導入についても紹介しています。

blog.showzine.co

  • WordPressの設定変更
  • テーマのテンプレートを確認
  • .htaccess(Apacheの場合)によるリダイレクト処理
  • 既存の投稿・固定ページ内にあるサイト内リンクを変更
  • 外部ツールの設定変更(Google AnalyticsやSearch Console)
  • 外部サイト(SNS等)からのリンク変更

WordPressnの設定変更

管理画面に入り「設定>一般」にある

  • WordPress アドレス (URL)
  • サイトアドレス (URL)

のプロトコル(http)部分を「https」に変更して「変更を保存」します。

するといったんログアウト(強制的に)し、プロトコルが「https」になった状態で再度ログイン画面が表示されるので、ログインします。

私の場合、メールフォームにプラグイン「MW WP Form」を使用していて、入力画面、確認画面、完了画面を個別にURL設定しているので、これも「http」から「https」に変更しておきます。

f:id:showjinx:20160719151004p:plain

テーマのテンプレートを確認

WordPressのテンプレートタグを使っていれば「http」を含む絶対パスが記述されていることはないと思いますが(そのためのタグなので)Webデザイナー、制作会社さんが納品したものでも思いっきり絶対パスで記述してたりするので注意してください。

テンプレート内に絶対パスを使用している場合にはこの機会にテンプレートタグに変更します。

使用テーマへのテンプレートパスを出力するタグ

<?php echo get_template_directory_uri(); ?>

*固定ページ、投稿の本文内のパスは別扱いです。(後述)

.htaccess(Apacheの場合)によるリダイレクト処理

ここまでの作業で「http」プロトコルと「https」プロトコル、どちらでもアクセス出来る状態です。検索エンジンにとってはこの二つは「コンテンツが同じ」であっても別のサイトとして認識されます。

これはコンテンツの共食いになるので、リダイレクトの設定をして、URLの正規化をします。(wwwのありなしを統一するように)

この例ではWebサーバーはApacheですので、設定ファイル「.htaccess」を編集します。

以下の記述を追記します。

.htaccess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

これで、これまでの「http」から始まるURLでアクセスしても「https」にリダイレクトされます。(301=恒久的リダイレクト)

既存の投稿・固定ページ内にあるサイト内リンクを変更

テーマで使用するテンプレートとは別で、投稿、固定ページの本文内には投稿時のパスが絶対パスで記述(データベースに格納)されています。

これをひとつひとつ変更していくのは現実的ではないので、プラグインの力を拝借します。

f:id:showjinx:20160719151204p:plain

プラグイン「Search Regex」をインストールしたら有効化。

管理画面のツールメニューから「Search Regex」に進みます。

f:id:showjinx:20160719151225p:plain

置換対象を示す「Source」を「Post content」とし

  • Search pattern:http://ドメイン
  • Replace pattern:https://ドメイン

を入力したら画面下にある「Replace」をクリック。

置換の結果が「Results」として表示されます。この段階ではまだ置換は完了していないので、問題なければ先ほどの「Replace」ボタンの右にある「Replace & Save」ボタンをクリックして置換を確定します。

これで完了の場合もありますが、カスタムフィールドの値はメタ情報ですので「Post content」に含まれません。

ですので、カスタムフィールドを使っていて画像を登録等している場合には対象に「Post meta value」を指定し、同様の操作をして置換及び保存をします。

その他の変更

運用しているWordPressサイトの環境にもよりますが、ここまででおおよそは対応(独自SSL化)できているかと思います。

細かいところでは

  • 外部ツールの設定変更(Google AnalyticsやSearch Console)
  • 外部サイト(SNS等)からのリンク変更

がありますが、Google Analyticsでは管理画面で変更するだけです。対象サイトのプロパティ設定で「デフォルトのURL」をhttpsに変更して保存します。

Search Consoleは既存のhttpサイトと別に新規に追加します。(httpsサイトとして)

また、Google Analyticsの設定に戻りますが、対象サイトのプロパティのプロパティ設定から「Sarch Console > Search Console を調整」に進み、追加した(Search Consoleで)httpsサイトを追加して両者を関連づけておきます。

外部サイトからのリンクはそのためにリダイレクト処理(301=恒久的)しているので問題ないかと思います。

SNS等のソーシャルサービスにおけるシェア数はhttpsサイトへは引き継がれないので別途対応が必要です。(プラグイン「SNS Count Cache」で簡単にできるようですので、必要な場合は調べてください)

検索機能をつける@WordPress

f:id:showjinx:20160715132334j:plain

WordPressに検索機能をつけるのはわりと簡単です。(満たす要件によりますが)

とくにデフォルトで用意されているものを使うのであれば以下のタグを検索フォームを表示したい場所(テンプレート)に記述すれば、フォームの窓と検索ボタンが出力されます。

<?php get_search_form(); ?>

こんなふうに出力されます。

f:id:showjinx:20160715132421p:plain

ソースを確認するとこんな具合に。

<form role="search" method="get" id="searchform" class="searchform" action="http://wp.showzine.co/">
    <div>
        <label class="screen-reader-text" for="s">検索:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="検索" />
    </div>
</form>

これで検索フォームが出来ました。

検索結果用のテンプレートが用意されていない場合にはindex.phpが適用されます。(検索結果を表示するループはメインループを使用します)

検索結果はそれ用に別のテンプレートを用意する場合には「search.php」という名称でテンプレートを用意します。この名前のテンプレートがあると検索結果にはこのテンプレートが適用されます。

検索結果用テンプレート search.php

<?php if (is_search()): /* 検索結果を表示するページを判別 */  ?>
<?php
      $allsearch =& new WP_Query("s=$s&showposts=-1"); // showpostsに「-1」を指定することで全ての投稿を検索対象に
      $key = wp_specialchars($s, 1); // 特殊文字をHTMLエンティティに変換
      $count = $allsearch->post_count;
      echo '<h1>“'.$key.'” を含む投稿は'.$count.'件ありました。</h1>';
?>
<?php while (have_posts()) : the_post(); ?>
    <div class="post">
        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
        <ul class="optional">
            <li class="date">Published: <?php echo get_post_time('M jS, Y'); ?></li>
            <li class="category">Category: <?php the_category(', '); ?></li>
            <?php if(has_tag() == true) : ?>
            <li class="tags">Tags: <?php the_tags('', ', ', ''); ?></li>
            <?php else : ?>
            <?php endif; ?>
        </ul>
        <?php the_excerpt(); ?>
    </div>
<?php endwhile; endif; ?>

上記の例では検索に使われたクエリ(文字列)とヒットした件数も表示しています。

また投稿タイトルの他、投稿年月日、カテゴリ名、タグも出力しています。

検索対象を投稿だけにする

この実装方法だと検索対象が固定ページにも及びます。投稿のみを対象に絞る場合には以下の記述を使用テーマのfunctions.phpに追加します。

<?php
/* 検索対象を投稿に限定 */
/* カスタムフィールドの値は検索範囲に入らない */
function search_filter($query) {
  if (!$query -> is_admin && $query -> is_search) {
    $query -> set('post_type', 'post'); // 対象のpost_typeを「post」に限定
  }
  return $query;
}
add_filter('pre_get_posts', 'search_filter');

カスタム投稿タイプも検索対象にする

前述のコードだと対象はデフォルトの投稿のみになります。カスタム投稿タイプで投稿タイプを追加している場合、それも含めたい場合には配列で指定します。

<?php
/* 検索対象を限定 - デフォルトの投稿と指定したカスタム投稿タイプ */
/* カスタムフィールドの値は検索範囲に入らない */
function search_filter($query) {
  if (!$query -> is_admin && $query -> is_search) {
    $query -> set('post_type', array('post', 'seminar')); // カンマ区切りで指定したいカスタム投稿タイプを
  }
  return $query;
}
add_filter('pre_get_posts', 'search_filter');

デフォルトで出力される検索フォームを自作する

デフォルトで出力されるものはテンプレートにそのソースコードが記述されているわけではないので変更ができません。CSSでのデザイン調整等で制御をする場合には「searchform.php」をいうファイル名でテンプレートを作り、その中に検索フォームのコードを記述します。

WordPressではこの「searchform.php」が存在すると、get_search_form(); を記述した場所にこのテンプレートの内容を出力します。

searchform.phpの内容例

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div class="search"><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="検索" />
    </div>
</form>

以上、基本的なところですが、WordPressに検索機能を独自でつけたい場合の実装例でした。

また、今回のまとめにはWebクリエイターボックスさんの以下の記事も大変参考になりました。ありがとうございます。

www.webcreatorbox.com

ループ内でカスタム投稿タイプを判別して出力を分ける@WordPress

f:id:showjinx:20160715114059j:plain

WordPressのループ内で投稿タイプを判別して出力を出し分ける例です。

例えば、投稿タイプごとに見出しにそれとわかるアイコン画像を表示したいとか、特定の文字列を表示したいとか。

ようするに、指定した投稿タイプごとに出力を分けたい場合に使えます。

ループには get_posts() を使っています。

<?php
    $args = array(
        'post_type' => array('post', 'seminar'), /* 投稿タイプを指定 *複数指定する場合はカンマ区切りで */
        'paged' => $paged,
        'posts_per_page' => 5, /* 取得記事件数 */
    );
?>
<?php $my_posts = get_posts( $args ); ?>
<?php if ( $my_posts ) :
    foreach ( $my_posts as $post ) : setup_postdata( $post ); ?>
        <div class="home_info-desc">
            <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
            <?php
                if($post->post_type == 'post'){
                    echo 'デフォルトの投稿の場合';
                }elseif($post->post_type == 'seminar'){
                    echo '投稿タイプのスラッグが "seminar" の場合';
                };
            ?>
        </div>
<?php endforeach; ?>
<?php else : /* 投稿がないとき */ ?>
    <p>情報はありません。</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

アイキャッチがあるかないかを判別する@WordPress

f:id:showjinx:20160715111323j:plain

WordPressのアイキャッチ画像を使う場合、アイキャッチ画像が存在(投稿に登録されているか)するか否かを判別する条件文の例です。

the_post_thumbnail() 関数を使います。

アイキャッチ画像がない場合には代替画像を指定して出力するようになっています。

<?php if(has_post_thumbnail()) : /* アイキャッチがあるかないかの条件分岐 */ ?>
    <?php the_post_thumbnail(); ?>
<?php else : ?>
    <img src="<?php echo get_template_directory_uri(); ?>/img/none_eyecatch.png" alt="">
<?php endif; ?>

ループで使うので、ループ内に記述するにはこんなふうに。(この例では get_posts() を使ってます)

<?php
    $args = array(
        'post_type' => array('post'), /* デフォルトの投稿を対象としている */
        'paged' => $paged,
        'posts_per_page' => 5, /* 取得記事件数 */
    );
?>
<?php $my_posts = get_posts( $args ); ?>
<?php if ( $my_posts ) : foreach ( $my_posts as $post ) : setup_postdata( $post ); ?>
    <?php if(has_post_thumbnail()) : /* アイキャッチがあるかないかの条件分岐 */ ?>
        <?php the_post_thumbnail(); ?>
    <?php else : ?>
        <img src="<?php echo get_template_directory_uri(); ?>/img/none_eyecatch.png" alt="">
    <?php endif; ?>
<?php endforeach; ?>
<?php else : /* 投稿がないとき */ ?>
    <p>情報はありません。</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>