30 3月, 2020

WordPress投稿記事の無駄なhタグを削除

WordPressの投稿記事で使用するHTMLのタグ h1、h2・・・は当然、記事の内容に合わせて作成します。
投稿記事のページのソースを見てみると余計な h2、h6 タグがWordPressのテーマのプログラムから出力されているのに気が付きました。
投稿記事以外で使われてほしくないし、SEO的にもよくないので消します。
※「Nifty Lite」テーマや元の「Specia」テーマのプログラムを直接修正します。
プログラムの修正は、まず管理者でログインして「外観」の「テーマエディタ」をクリックします。
テーマエディタで使用しているプログラムが表示されるので対象プログラムを選択して修正します。

－　目次　－

サイドバーの「最近の投稿」で使ってるh3タグを削除
表示ページタイトルの投稿記事名にあるh2タグを削除
投稿記事名表示のタグh2をh1に修正
投稿日のh6タグを削除

１．サイドバーの「最近の投稿」で使ってるh3タグを削除

いきなりh3からですか！って思いました。
投稿記事を書く人以外が見出しや段落のhタグを出力するのは理解できないので消します。

修正プログラム：Specia: sidebar.php (inc/sidebar/sidebar.php)

無難に「h3」を「p」タグに置き換えます。

２．表示ページタイトルの投稿記事名にあるh2タグを削除

同じ情報を2か所に表示するのは無駄なのでついでにまるごと消すことにします。
いるのであればタグのみ削除すればOKです。

修正プログラム：Nifty Lite: specia-breadcrumb.php (sections/specia-breadcrumb.php)

コメントタグで出力しないようにします。
72行目（修正前：col-md-6 col-xs-12 col-sm-6）はbootstrapグリッドシステムの列がずれないよう調整しています。

３．投稿記事名表示のタグh2をh1に修正

titleとh2タグに同じ投稿記事名が使われてるのですがなぜかh1はありません。
理解できないし意味不明なのでh1に書き換えます。
※titleはページを外から見た人向けに、 h1はサイト閲覧している人向けで使い分けます。
　同じでなくてもよいようなのですがシンプルに同じにしています。

修正プログラム：Specia: content-page.php (template-parts/content-page.php)

h2タグの記述をh1に修正します。

４．投稿日のh6タグを削除

投稿日になぜかh6タグがついています。
しかも見た目が気に入らないので消します。

修正プログラム：Specia: content-page.php (template-parts/content-page.php)

12行目と17行目のコメントタグで無効にします。

15 3月, 2020

WordPress投稿ページからのダウンロード（WordPress Download Manager）

ファイル（ZipやPDFなど）を投稿ページからダウンロードするプラグイン（WordPress Download Manager）を導入します。
※WordPress Download Managerプラグインはダウンロードファイルサイズが扱えるファイルが5MBと小さいのです。
※日本語ファイル名をアップするとダウンロード時に文字化けします。

プラグインの導入方法は以下のページに記載していますので導入手順は省略します。

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

ダウンロードするにはダウンロードページを作成してリンクを埋め込む手順となります。

－　目次　－

ダウンロードページの作成
ダウンロードリンクの埋込

１．ダウンロードページの作成

WordPress管理者でログインして「Downloads」の「Add New」をクリックします。
ダウンロードするファイルのタイトルと説明を記入します。

ダウンロードするファイルを「Drop file heare」へドロップします。

「公開」にある「更新」をクリックして保存します。
「Downloads」の「All Files」をクリックします。

作成された「Short-code」の値をメモします。

２．ダウンロードページの埋込

作成する投稿の編集するページにメモした「Short-code」の値を「テキスト」で記述します。

プレビューすると以下のように表示されます。

ダウンロードするファイルの説明のリンクをクリックすると説明のページを表示します。

14 3月, 2020

コピペでダブルコーテーションやシングルコーテーションが勝手に変換される

WordPressの仕様だなんて知りませんでした。
コード例記載しているのにコピペしたら半角が全角になっていてびっくり！
調べて変換されないように対応しました。

WordPressの管理者でログインして「外観」の「テーマエディター」をクリックします。
「テーマのための関数 (functions.php)」をクリックします。

2行目のコードを追記して下方にある「ファイルの更新」をクリックします。
コード：remove_filter("the_content", "wptexturize");

これでコピペしても半角が全角に変換されることがなくなります。

8 3月, 2020

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

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

完成イメージ

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

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

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

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

<section class="page-wrapper">
<div class="container">
<div class="row padding-top-60 padding-bottom-60">

<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>
            
                <?php get_sidebar(); ?>
        </div>
    </div>
</section>

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

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

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

拡大イメージのサンプル

－　目次　－

WP jQuery Lightbox プラグインの設定
拡大画像の設定方法

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

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

２．拡大画像の設定方法

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

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

1 3月, 2020

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

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

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

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

－　目次　－

Microsoft Web Platform Installer 5.1 Setup について
Windows10（64bit）のIISにWordPress（日本語）をインストール
Microsoft Web Platform Installer の IISにWordPress（英語）を組込む
　※日本語版をインストールする場合は不要
ローカルWordPressリストアする準備

■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の下にある「今すぐインストール」リンクをクリックしてインストールします。

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

リンクへの通知（ピンバック）を無効にする

投稿を作成して自分のページにリンクを貼った時にいきなり通知がきました。
WordPressでページへのリンクを貼った時にリンク先へ通知するようです。
但し、通知を受け取れるのは同じWordPressのサイトらしいです。
通知に対して承認／拒否をする機能があるみたい・・・なんて微妙な機能！
なので、無効にすることにしました。

設定方法
WordPressの管理メニューにある「設定」の「ディスカッション」をクリックします。
「投稿中からリンクしたすべてのブログへの通知を試みる」のチェックを外して「変更を保存」をクリックします。

これでうっとおしい自分への通知（セルプピンバック）が来なくなります。

24 2月, 2020

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

WordPressでサイト構築した時、プラグインの追加方法すら知りませんでした。なので紹介もかねて記録します。

－　目次　－

WordPressでプラグインを検索してインストール
HPからダウンロードしたZIPでインストール

※プラグインは大変便利ですが反面、以下のデメリットやリスクがあります。
　・ページの表示が重く（表示に時間がかかる）なる（重いページほど見てもらえません。）
　・セキュリティホールの要因になる（簡単に言うとセキュリティが弱くなる）
　・バージョンアップで突然動かなくなる
　・インストール後に有効化してシステムが壊れるもしくは不調になる（最悪使えなくなる）
※プラグイン導入前にはバックアップを取ることをおすすめします。
　バックアップについては利用している方法を以下のリンクに記載しています。

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

１．WordPressでプラグインを検索してインストール

WordPressの管理メニューでログインしたページの左側にある「プラグイン」の「新規追加」をクリックします。

表示されたページの右側にある「プラグインの検索...」に追加したい名前を入力すると検索結果が表示されます。

※「使用中の WordPress バージョンと互換性あり」とあればまだ安心ですが中には「使用中の WordPress バージョンで未検証」というプラグインもありますのでよくわからないままインストールするとトラブルの要因となりかねないので注意が必要です。

「今すぐインストール」をクリックするとインストール完了後に「有効化」に表示が変わります。
「有効化」をクリックするとインストールしたプラグインは利用可能になります。

２．HPからダウンロードしたZIPでインストール

プラグインはZIPでHPより提供されているものもあります。
インストールしたいZIPを入手します。

例：WordPress Importer

「出典元」wordpress.org　WordPress impoter

WordPress Importer

WordPres管理者でログインしたら「プラグイン」の「新規追加」をクリックします。
「プラグインのアップロード」をクリックすると「参照...」が表示されるのでクリックしてZIPを指定します。
「今すぐインストール」が有効になるのでクリックします。

「有効化」をクリックして完了です。

24 2月, 2020

サムネイルページの作成

投稿した記事がカテゴリにサイトマップでまとまっているのはいいのですが・・・
カテゴリ単位でサムネイルが利用できるともっといいですよね。

カテゴリ単位でサムネイルをページに表示するのは以下の手順で行いました。

－　目次　－

アイキャッチ画像に表示されるポスト日付の非表示
アイキャッチ画像表示／非表示設定（Hide Featured Imageプラグインを使用）
サムネイルページ作成（WP Show Postsプラグインを使用）

完成イメージ

１．アイキャッチ画像に表示されるポスト日付の非表示

アイキャッチ画像を表示したらなんか余計なものが表示されている・・・
非表示するプラグインを使っても消えない・・・
ぐぐって調べたどの処方箋も効果ない・・・
ちなみに以下のようにポスト日付が意地でも表示されていました。
※WordPressのバージョンや使用するテーマによっては表示されないかもしれません。

ポスト日付を永久に消す方法の説明になります。
「content-page.php」にあるポスト日付を表示するコードを修正して表示しないようにします。

（1）WordPressの管理者でログインします。
（2）「外観」の「テーマエディター」を開きます。
（3）「Specea」のリンクをクリックします。
　　※使っているテーマにより手順が変わるところになるかと思います。

（4）「content-page.php」をクリックします。

（5）12行目「」の行を追加してほ「ファイルを更新」クリックします。

これで永久にポスト日付が表示されなくなります！

２．アイキャッチ画像表示／非表示設定

プラグインを導入しなくてもポスト日付を非表示にしたところのちょい下にあるコードをコメントにすればアイキャッチ画像も非表示にできるのですが「この投稿ページはアイキャッチ画像を表示したいな」に対応できません。
Hide Featured Imageプラグインをインストールすることで管理が楽になるので導入しています。
「投稿」の「新規追加」で表示されるページに「Hide Featured Image?」が追加されます。