8 3月, 2020

WordPressの投稿記事でカテゴリ関連記事一覧の追加

投稿記事のカテゴリで同一の関連記事を一覧で表示しているページがあります。
投稿記事のページは全て同じように関連記事の一覧を表示したいのでプラグインでなくプログラムを修正することにしました。
とはいえ採用したテーマやCSSの構成を把握するのも面倒なのでかなり手抜きですが参考程度に備忘録としますのでご容赦願います。

完成イメージ

 

投稿記事表示ページのプログラム修正

WordPressに管理者でログインして「外観」の「テーマエディター」をクリックします。
使用しているテーマは無料の「Nifty Lite」なので継承元の「Specia」リンクをクリックします。

「個別投稿（single.php）」をクリックします。

赤字の部分が追記したコードになります。
太字の部分はタイトルなど数値の10は最大10記事を表示します。
記事がなければ表示しません。
簡単なHTMLやサーバーサイドスクリプト言語を理解できれば難しくない内容かと思いますのでコピペしていい感じに修正して利用してください。

<!-- Blog & Sidebar Section -->
<section class="page-wrapper">
<div class="container">
<div class="row padding-top-60 padding-bottom-60">
<!--Blog Detail-->
<div class="<?php specia_post_column(); ?>" >
<?php if( have_posts() ): ?>
<?php while( have_posts() ): the_post(); ?>
<?php get_template_part('template-parts/content','page'); ?>
<?php endwhile; ?>
<?php comments_template( '', true ); // show comments  ?>
<?php else: ?>
<?php get_template_part('template-parts/content','none'); ?>
<?php endif; ?>
<?php
$categ = get_the_category($post->ID);
$catID = array();
foreach($categ as $cat){
array_push($catID, $cat -> cat_ID);
}
$args = array(
'post__not_in' => array($post->ID),
'category__in' => $catID,
'posts_per_page' => 10,
'orderby' => 'rand'
);
$the_query = new WP_Query($args);
if($the_query -> have_posts()) :?>
<b>関連記事</b>
<table>
    <tr>
        <td bgcolor="midnightblue" width="120"><font color="white">画像</font></td>
        <td bgcolor="midnightblue"><font color="white">タイトル</font></td>
    </tr>
<?php while($the_query -> have_posts()) : $the_query -> the_post(); ?>
    <tr>
        <td>
        <a href="<?php the_permalink(); ?>">
            <?php if(has_post_thumbnail()): the_post_thumbnail('thumbnail'); endif; ?>
        </a>
        </td>
        <td valign="top">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </td>
    </tr>
<?php endwhile; ?>
</table>
<?php endif; wp_reset_postdata(); ?>
<div class="clearfix"></div>
            </div>
            <!--/End of Blog Detail-->
                <?php get_sidebar(); ?>
        </div>   
    </div>
</section>
<!-- End of Blog & Sidebar Section -->

 

画像拡大ポップアップ表示（WP jQuery Lightbox）

画像をページに貼り付けると縮小しないとみれないサイズの場合もあります。
ページの説明などがあるのでポップアップで画像のみ拡大表示させる WP jQuery Lightbox プラグインを利用することにしました。
数あるプラグインの中から選んだ理由は使いたい機能のみのシンプルな構成になっているからです。
プラグインの導入方法は以下のページに記載していますので導入手順は省略します。

参照：WordPressでプラグインの追加方法

拡大イメージのサンプル

［画像クリックで拡大表示］


１．WP jQuery Lightbox プラグインの設定

WordPress管理者でログインして「設定」の「jQuery Lightbox」をクリックします。
画像はデバイスに合わせたサイズで見るほうが使いやすいと考えるので「スクリーンサイズに合わせて画像を縮小」にチェックして「設定保存」をクリックします。


２．拡大画像の設定方法

メディアで追加した画像を選択します。
上側に表示される鉛筆のアイコンをクリックして設定を行います。
※クリックする画像はビジュアルタブを選択すると表示されます。

ここではページに中で表示しているので拡大ではフルサイズで見せたいのでリンク先に「メディアファイル」を選択します。
キャプションにクリックしたら画像拡大しますよと説明文を記述して「更新」ボタンをクリックします。
これで画像クリックされたら画像を登録した時のサイズでポップアップ表示されます。
※登録する画像を分けて見せることもできます。

1 3月, 2020

MySQLの基本的なコマンドの使い方

DOSでMySQLのコマンドをたま～に利用するのでまとめておきます。


１．ログイン

SQLを実行するコマンドプロンプトを使用するために引数にユーザーを指定してログインします。
コマンド：mysql -u DBユーザー名 -p
※rootはMySQLの管理者アカウントです。

使用するDBを指定します。
※指定しないと実行したSQLが「ERROR 1046 (3D000): No database selected」でエラーになります。
コマンド：use DB名;


２．データベース一覧の確認

DBに登録されているデータベース一覧を表示します。

コマンド：SHOW DATABASES;


３．ユーザー一覧の確認

DBに登録されているユーザー一覧を表示します。

コマンド：SELECT Host, User FROM mysql.user;
※rootはMySQLの管理者アカウントです。


４．テーブル一覧の確認

作成されているテーブルの一覧を表示します。

コマンド：show tables;


５．エクスポート／インポート

テキストのSQLが書かれているファイルがエクスポートされます。

コマンド：mysqldump --single-transaction -u DBユーザー名 -p DBパスワード > エクスポートファイル

エクスポートしたファイルを指定ユーザーにインポートします。

コマンド：mysql -uインポート先のDBユーザー名 -pパスワード DB名 < インポートするファイル

これでインポートしたテーブルが作成されています。


６．ユーザー作成／削除と権限付与

新規にDBユーザーを作成します。

コマンド：CREATE USER 作成するDBユーザー名@DB名 IDENTIFIED BY 'DBユーザーのパスワード'


インポートするときに権限が必要になるので付与します。
※付与する権限のあるユーザーでログインしてからGRANTコマンドを実施します。

コマンド：GRANT FILE ON *.* TO 付与するDBユーザー名@DB名

全権限を付与する時のコマンドです。

コマンド：GRANT ALL PRIVILEGES ON *.* TO 付与するDBユーザー名@DB名

指定したDBユーザーを削除します。

コマンド：DROP USER 作成するDBユーザー名@DB名


７．データベース作成／削除

指定したDBデータベースを作成します。

コマンド：CREATE DATABASE 作成するDB名

 

指定したDBデータベースを削除します。

コマンド：DROP DATABASE 作成するDB名

 

1 3月, 2020

Webサイトのエクスポートとローカルへのインポート（バックアップ兼リストア）

WordPresで作成したWebサイトのバックアップ運用手順のまとめになります。
リストアは自分のローカルのPCにWordPressを作成した環境へ行う前提となっています。
未解決課題の内容もあるので詳細は以下を参照してください。

参照：Webサイトのローカルリストア用WordPress環境作成

 

１．WebサイトのWordPressよりブログをバックアップ（エクスポート）

管理者でログインして「ツール」の「エクスポート」をクリックします。
「すべてのコンテンツ」を選択して「エクスポートファイルをダウンロード」ボタンクリックします。
※重要！見たらすぐわかりますがエクスポートされたXMLファイルのサイズは明らかに少なすぎます。
　中身を見ると参照先の情報ばかりに見えます。
　本当の意味えバックアップするのはリストアまでしないと意味がありません。

 

２．ブログをローカルへのインポート（バックアップ兼リストア）

管理者でログインして「ツール」の「インポート」をクリックします。
「インポーターの実行」をクリックします。

エクスポートしたファイルを参照から指定します。
「ファイルをアップロードしてインポート」クリックします。

既存のユーザーへインポートしたいので「あるいは投稿を既存のユーザーに割り当てる」を選択します。
「添付ファイルをダウンロードしてインポートする」をチェックつけます。
「実行」ボタンをクリックします。

「インポートは完了しました。」と表示されれば完了です。

1 3月, 2020

Webサイトのローカルバックアップ兼リストア用WordPress環境作成

せっかく作成した投稿記事など何らかの理由で失ってはたまりません。
また、失わないためにも試す環境があれば安定して動かしたい環境を壊すリスクを減らすことにもなります。
自分の使っているパソコンに WordPress 環境を作成して運用しているWebサイトからエクスポート（バックアップ）したデータをインポート（リストア）します。
基本となる材料はこんな感じです。

インストール作業を楽にしてくれるツールを利用する手順もあるようです。
個々にインストールする手順はよく見つかるのでまとめてできる手順があったので試してみました。
概要は以下の内容に沿ってのまとめになります。

■Webサイトのローカルリストア用WordPress環境作成
・Microsoft Web Platform Installer 5.1 Setup について

■Webサイトのエクスポートとローカルへのインポート（バックアップ兼リストア）　※リンクを参照してください。
・WebサイトのWordPressよりブログをエクスポート
・ブログをローカルへのインポート（バックアップ兼リストア）

※記載の手順でリストアするとインポートで一部エラーが発生しており未解決です。
　発生したエラーはタイトルで使用している画像がなぜか取り込めませんでした。
この程度であれば手動で戻しても手間でないので手順をまとめることにしました。

 

１．Microsoft Web Platform Installer 5.1 Setup について

以下のインストールをまとめて行うことができます。

・WordPress（英語）
・php
・MySQL

WordPress（日本語）を簡単にインストールするのが目的なので別の手順と併用した手順をまとめています。
ダウンロードは以下のページより「Install this extension」をクリックして行います。

「出典元」Microsoft　Web Platform Installer
https://www.microsoft.com/web/downloads/platform.aspx

「WebPlatformInstaller_x64_en-US.msi」がダウンロードされます。
つづきは　２－２．Microsoft Web Platform Installer（Web PI） インストール　から！

 

２．Windows10（64bit）のIISにWordPress（日本語）をインストール

手順は以下の内容になります。

・IISの有効化
・Microsoft Web Platform Installer インストール
・WordPress（日本語）をIISに組込む

 

２－１．IISの有効化

Windows10ではデフォルトでIISが入っていませんので利用できるように有効化する必要があります。
有効化は「コントロールパネル」ー「プログラム」にある「Windowsの機能の有効化または無効化」をクリックします。

 

「Windowsの機能」画面が開くので以下の項目にチェックを付けてOKボタンクリックします。

・インターネット インフォメーション サービス
・インターネット インフォメーション サービスのホスト可能なWebコア
・CGI

 

２－２．Microsoft Web Platform Installer （Web PI）インストール

ダウンロードした「WebPlatformInstaller_x64_en-US.msi」を実行します。
Install開始したら一気に終了しちゃいます。

php インストール

スタートメニューから「Microsoft WebPlatform Installer」をクリックします。
画面右上の虫眼鏡左にある検索テキストボックスに「php」と入力してENTERキーを押します。
※ENTERキーを押さないと検索してくれません。

「PHP（x64） For IIS Express 」の行にある「追加」ボタンをクリックして「インストール」をクリックします。
以下はインストールが完了した状態です。インストール途中での設定はありませんでした。

が、インストールしたいのが「php」なのでいいんですが「Windows Cache Extension 2.0(x64) for PHP 7.4 in IIS Express」でエラーが出ています。
PHPを高速化する拡張機能で問題なさそうなので無視しています。

WordPress（英語）とMySQLインストール

今度はWeb PI画面の検索テキストボックスに「WordPress」を入力してENTERキーを押します。
WordPress（英語）の行の「追加」ボタンをクリックして「インストール」ボタンをクリックします。
※2020年2月29日時点では、「WordPress 日本語版パッケージ」は検索結果に表示されていません。

MySQLの「root」アカウントの「パスワード」を入力して「続行」ボタンをクリックします。
※MySQLを直接利用する場合はないと思いますが必ずメモしてください。

画面にある項目はセキュリティ用でローカルのインポートや検証用として利用するので必要ないくきにせず入力します。
WordPressのキー生成サービスで表示する値（含まれるバックスラッシュと＄は削除）を入力します。

「出典元」WordPress.org　Salt Key Generator – WordPress API
https://api.wordpress.org/secret-key/1.1/salt/

続行して完了すると以下の状態になります。
パスワードの設定に表示されている値はメモっときます。
※重要！このメモ間違うとWordPressにログインできなくなります。

 

２－３．WordPress（日本語）をIISに組込む

2020年2月29日時点、Web PIのWordPressは残念ながら英語版しかないので別途日本語版をダウンロードして解凍します。
※英語版を使う場合は、C:\Users\USER\Documents\My Web Sites\wordpress フォルダを使用します。
　使わない場合は不要なので削除します。

「出典元」wordpress.org　WordPressを入手

ダウンロード

解凍した「wordpress」フォルダを「C:\inetpub\wwwroot\」に移動します。
※移動したフォルダにある「IIS_USRS」と「Users」に書込み権限を付与します。
　エクスプローラーで「wordpress」ファイルの「プロパティ」メニューから「セキュリティ」タブをクリックして「編集」ボタンの画面で設定します。
URL「http://localhost/wordpress/wp-admin」をブラウザで開きます。
以下のページにある「さぁ、始めましょう！」をクリックします。
メモった「データベース名」、「ユーザー名」、「パスワード」を入力します。
「テーブル接頭辞」はMySQLのテーブル名などのプレフィックス（接頭辞）になるので任意の値を設定します。
「送信」ボタンをクリックします。

※以下のページのエラーが表示される場合があります。
　IISに書込み権限を先に設定していない場合に発生します。
このページが表示されたら説明の通りテキストを新規作成した「wp-config.php」ファイルに貼り付けて「C:\inetpub\wwwroot\wordpress\」に保存します。
「インストール実行」ボタンをクリックします。

「サイトのタイトル」「ユーザー名」「パスワード」に任意の値を入力します。
※パスワードは「普通」以上じゃないと「WordPressをインストール」ボタンが夕億になりません。
「メールアドレス」は必要ないのですが必須なので適当なアドレスを入力します。
※存在するメールアドレスを設定してもメールの設定をしてないので使えません。
「検索エンジンがサイトをインデックスしないようにする」チェックはサイトを公開しないので不要です。
「WordPressをインストール」ボタンをクリックします。

これでローカルのWordPressをインストール完了です。
「ログイン」ボタンをクリックしてログインして利用します。

 

３．Microsoft Web Platform Installer の IISにWordPress（英語）を組込む

※日本語版をインストールした場合は、この手順は不要になります。
Web PIでインストールしたWordPressは「C:\Users\USER\Documents\My Web Sites」フォルダに「wordpress」フォルダが作成されます。
この「wordpress」をIISのフォルダにコピーして日本語のインストールと同じ手順でインストールします。

 

４．ローカルWordPressリストアする準備

準備としてインポートする場合、エクスポートした環境と同じ状態で行う必要があります。
この準備をしないでもインポートはできますが想像の通り異なる景色になります。

・同じテーマをインストールして有効化
・同じプラグインをインストールして有効化
・外観のテーマエディターで変更したphpソースへの修正を行う
・インポートプラグインをインストールして有効化

※安定して動作しているプラグインやテーマは提供されなくなったり動作しなくなった時のためにインストールするZIPをダウンロードしておくのも大事と考えます。
ただし、セキュリティ要因で使えない場合は速やかに利用中止する必要があります。

外観のテーマエディタでいじったものは手動で反映しないとだめです。
同じテーマ・プラグインのインストールする手順については以下を参考にしてください。
インポートプラグインについても同様です。
※セキュリティ関連などデータの復元に必要でないものはインストールする必要はありません。

参照：WordPressでプラグインの追加方法

インポートプラグインが有効でない時の状態です。
WordPressの下にある「今すぐインストール」リンクをクリックしてインストールします。

インポートプラグインが有効な時の状態です。
「インポーターの実行」が表示されます。