Webデザイナー 日々のメモ

WordPressで自動的に外部リンクにアイコンを付け、
画像にはアイコンを付けないような設定をしてみます。

プラグインでも出来ますが、今回はfunctions.phpへのコードの追記と
CSSの設定だけで実現できるもの。

WordPressのテーマ内のfunctions.phpに以下のコードを追加します。

// 外部リンクにアイコンを付ける
add_filter( 'the_content', 'add_external_content', 12 );
function add_external_content( $content ) {
$add_img = 0; // img（画像での外部リンク）にもアイコン付ける場合は 1 付けない場合は 0
preg_match_all( "/<a[^>]+?href[^>]+?>/i", $content, $link_array );

$my_url = preg_quote( rtrim( get_bloginfo("url"), "/" ) . "/", "/" );

foreach( array_unique( $link_array[0] ) as $link ) {
$replaced = $link;

if( !preg_match( "/href=['|\"]?\s*?${my_url}[^>]+?['|\"]/i", $link ) ) {
$replaced = str_replace( ">", " class=\"external ext_icon\">", $replaced );
$content = str_replace( $link, $replaced, $content );
if( !$add_img ) {
// img の時はアイコン消す（class="external" は残す）
$content = preg_replace(
"/(<a[^>]+?href[^>]+?external) ext_icon([^>]+?>\s*?<\s*?img[^>]+?src[^>]+?>\s*?<\/a>)/is",
"$1$2",
$content
);
}
}
}
return $content;
}

CSSには以下を追加し、CSSと同階層にlink-icon.svgをアップロードします。
※ファイル名や設置場所は適宜変更してください。

a.ext_icon[target="_blank"] {
background: url(./link-icon.svg) 100% 50% no-repeat;
padding-right: 15px;
margin-right: 2px;
}

aタグのあとに改行が入るとテキストと認識してしまうため、アイコンの付与にCSSには.ext_iconだけではなく、[target="_blank"]も判断基準に付け加えています。

参考：https://www.iscle.com/web-it/wp/external-link-icon.html
http://thk.kanzae.net/net/wordpress/t1316/
https://fukuro-press.com/wp-way-to-add-icon-to-ext-link/

WordPressでのSEO対策として
最低限やったほうが良いものをまとめていきます。

サーチコンソールがパンくずやAMPも登録されるため、
パンくずやAMPを設定後、サーチコンソールに登録するのが良いと思います。

・SSL設定（サーバー・htaccess）
・（Really Simple SSLプラグインのインストール）・・・htaccessなどで設定している場合は不要
　↓
・Googleアナリティクスの設置
　↓
・All in One SEOプラグインのインストール
・（サイトマップ系プラグイン（XML Sitemaps）のインストール）・・・All in One SEOでも生成できるので、All in One SEOを入れている場合は不要
　↓
・（パンくず系プラグイン（Breadcrumb NavXT）のインストール）・・・テンプレートにパンくずがある場合は不要。カテゴリーが複雑な場合など使用すると良い。
　↓
・（AMPプラグイン（AMP for WP）のインストール）・・・更新頻度の高い場合はキャッシュに注意
　↓
・サーチコンソールへのサイトマップXMLの登録
・（サーチコンソールへの個別ページURLの登録）
　↓
・WebSubプラグインのインストール
　↓
・PageSpeed Insightsでの最適化

場合によっては、キャッシュ系のWP Super CacheプラグインをインストールするとHTMLベースのページになり表示も軽くなり、PageSpeed Insightsの点数も上がります。

検索順位を調べるなら、検索順位チェックツールGRC

集客できるウェブ担当者になろう！【SEO検定】

Favorite

検索エンジンに認識され検索出来るようになる状態を「インデックス登録」と言います。

※WebSubよりもサーチコンソールに1ページずつURLを登録するのが（もしかしたら）一番確実で一番早くインデックスされるかも。。。（2023.01現在調べ）

通常はGoogleサーチコンソール（通称：サチコ）の「サイトマップの送信」などをしてGoogleに登録します。

WordPressには、これ以外にもサイトの更新をいち早くGoogleの検索エンジン伝えてくれるプラグインがあります。

WebSub (FKA. PubSubHubbub)

※FKA.とは、formerly known asの略で「以前は…として知られていた」という訳で「旧名称」や「旧」という意味です。

インストール方法

管理画面の「プラグイン」→「新規追加」から
「WebSub」で検索します。
インストール→有効化したら完了です。

WebSubの仕組み

WebSub（旧：PubSubHubbub）は、WordPressの新しい記事を検索エンジンに対して瞬時に通知する仕組みです。
Googleは近年、ロボットによるクローリングに頼らない、WebSubを利用したインデックスに取り組んでいます。

通常、GoogleのクローラーがサイトマップXMLなどを定期的に巡回し更新情報を取得します。
この仕組みではGoogleのクローラーが巡回に来るまで新しい記事は検索エンジンにインデックスされないことになってしまいます。

WebSubを利用することで、新しい記事の公開と同時に通知され、検索エンジンにインデックスされるようになります。

参考：https://the-simple.jp/wordpress-websubpubsubhubbub
https://netaone.com/wp/pubsubhubbub/
https://ja.wikipedia.org/wiki/WebSub

検索順位を調べるなら、検索順位チェックツールGRC

集客できるウェブ担当者になろう！【SEO検定】

Favorite

初期状態だとhttpでのアクセスになるので、
サーバーのSSL設定などを済ませたら、WordPressの設定をhttps用に変更していきます。

管理画面の設定

管理画面から「設定」→「一般」へ進みます。
「WordPress アドレス（URL）」と「サイトアドレス（URL）」のURLを、httpからhttpsに変更します。
変更したら「変更を保存」をクリックします。

.htaccessの設定

WordPressがインストールされているディレクトリに.htaccessというファイルがあるので、こちらを編集していきます。

このサイトの場合、ダウンロードした状態は下記のようになっていました。

# BEGIN WordPress
# "BEGIN WordPress" から "END WordPress" までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /memo/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /memo/index.php [L]
</IfModule>

# END WordPress

これにhttpsへのリダイレクト設定を追加していきますが、
記述する順序が重要になってきます。

もともと記述されているコードの上に以下のコードを追記します。

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

httpのURLにアクセスしてみてhttpsにリダイレクトすることを確認して
リダイレクトされていれば設定完了です。

参考：https://recooord.org/wordpress-redirect-setting/

Favorite

WordPressにログイン後表示される管理ツールバーをカスタマイズします。
既存のメニューを非表示化し、使いやすくします。
→リンクを追加する方法はこちら

function remove_admin_bar_menu_control( $wp_admin_bar ) {
$wp_admin_bar->remove_menu( 'themes' ); // サイト名 → テーマ（ウェブサイト側）
$wp_admin_bar->remove_menu( 'customize' ); // サイト名 → カスタマイズ（ウェブサイト側）
$wp_admin_bar->remove_menu( 'comments' ); // コメント
$wp_admin_bar->remove_menu( 'widgets' ); // ウィジェット
$wp_admin_bar->remove_menu( 'menus' ); // メニュー
$wp_admin_bar->remove_menu( 'updates' ); // 更新
$wp_admin_bar->remove_menu( 'new-media' ); // 新規 → メディア
$wp_admin_bar->remove_menu( 'new-link' ); // 新規 → リンク
$wp_admin_bar->remove_menu( 'new-page' ); // 新規 → 固定ページ
$wp_admin_bar->remove_menu( 'new-user' ); // 新規 → ユーザー
$wp_admin_bar->remove_menu( 'user-info' ); // マイアカウント → プロフィール
$wp_admin_bar->remove_menu( 'edit-profile' ); // マイアカウント → プロフィール編集
$wp_admin_bar->remove_menu( 'search' ); // 検索（ウェブサイト側）
}
add_action('admin_bar_menu', 'remove_admin_bar_menu_control', 111);

参考：https://wp-labo.com/wordpress-admin-bar-menu-hidden-customize/

Favorite

WordPressでログイン後に上部に表示される
管理ツールバーにリンクを追加するカスタマイズ方法です。
→既存メニューを非表示にする方法はこちら

ツールバーからすぐにアクセスランキングにアクセス出来るように
functions.phpに以下のようにコードを追記することでリンクを追加することができます。

//管理ツールバーにリンク追加
function customize_admin_bar_menu($wp_admin_bar){
//親メニュー
$title = sprintf(
'<span class="ab-label">%s</span>',
'追加リンク'//親メニューラベル
);
$wp_admin_bar->add_menu(array(
'id' => 'dashboard_menu',
'meta' => array(),
'title' => $title
));
//サブメニュー
$wp_admin_bar->add_menu(array(
'parent' => 'dashboard_menu', // 親メニューID
'id' => 'dashboard_menu-plugins', // 子メニューID
'meta' => array(),
'title' => 'WordPress Popular Posts', // 子メニューラベル
'href' => home_url('/wp-admin/options-general.php?page=wordpress-popular-posts') // 子メニューURL
));
}
add_action('admin_bar_menu', 'customize_admin_bar_menu', 9999);

参考：https://nelog.jp/admin-tool-bar-custom

よく見られているページ・アクセスランキングなどをサイドバーなどに表示しているサイトが多いですが、表示しないまでもWordPressの管理画面上でどのページ・どの記事がよく見られているかアクセス数などが簡単に見られると便利です。

GoogleAnalyticsでも簡単に見ることは出来ますが、
記事の投稿のついでに気軽に見られると、どのような記事が良く見られているのか、今後の記事を書く上でも役に立ちます。

WordPress Popular Posts

インストール方法

「プラグイン」→「新規追加」から
WordPress Popular Postsで検索をします。
インストール→有効化すると計測が始まります。（インストール前は計測されません。）

設定方法

有効化だけでも特に問題なく使えますが、
管理画面のサイドバー「設定」→「WordPress Popular Posts」から設定をして、自分のアクセスを除外することが出来ます。（ログインしている場合のみ除外）

メイン画面の「ツール」タブをクリック
「データ」の「閲覧を記録する対象者」を
「全員」から「訪問者のみ」に変更し
適用ボタンをクリックします。

アクセス数の確認方法

サイトのフロントに表示しない場合、
管理画面からアクセス数を確認するだけの場合、
サイドバー「設定」→「WordPress Popular Posts」と遷移するだけで
確認できます。

参考：https://www.itti.jp/web-design/the-best-way-to-display-popular-posts-in-wordpress/
https://lucy.ne.jp/bazubu/how-to-add-popular-posts-23487.html
https://senior-chie.net/skill/2784/

Favorite

WordPressで内部リンクを記述して投稿をすると自分のサイトから自分のサイトに対してもpingを送信します。

コメントに未承認コメントが溜まっていくため紛らわしく、この挙動を好まない場合もあります。

No Self Pings

「プラグイン」→「新規追加」から
No Self Pingsで検索し、インストール→有効化します。

以上でブログ内のpingを無効化することが出来ます。
→内部・外部全部のピンバック機能を停止する方法

Favorite

ブロックエディターを便利に使うメリットもあります。

そのひとつが画像のコピペです。

クラシックエディターでは「メディアを追加」からアップロードして選択して画像を掲載していましたが、
ブロックエディターでは「コピペ」のみで画像掲載可能になりました。

Windowsの場合、画像ソフトにIrfanViewを
スクリーンキャプチャソフトにLightscreen Portableを
インストールしておくと便利です。

IrfanViewの特徴
・ソフトが軽い（起動が早い）
・画像の部分選択が可能
・フリーソフトである

Lightscreen Portableの特徴
・インストール不要
・クリップボードに残る
・画像も保存される

など、画像をコピペで掲載するのに相性の良いソフトになります。

参考：https://keizokuma.com/image-kopipe/

Favorite

WordPress5.0から投稿画面がGutenbergと言われるブロックエディターに変わりました。

昔からのユーザーにとっては、なかなか使いづらい面も多いものです。
旧エディターに戻すことで、投稿の効率化を図ります。

Classic Editor

「プラグイン」→「新規追加」で
Classic Editorで検索します。
インストールし有効化すると、投稿画面が旧エディターに切り替わります。

有効化しただけだと、全投稿画面が旧エディター（クラシックエディター）に切り替わるだけなので
今後ブロックエディターを完全に使わない場合このままでも良いですが、
ブロックエディターに切り替えながら使いたい場合は、設定変更が必要になります。
（ソースコードをそのまま表示する場合に使うHighlighting Code Blockはブロックエディターのほうが使いやすいです。）

Classic Editorの設定変更

「プラグイン」→「インストール済みプラグイン」から
プラグイン一覧画面に移動します。
Classic Editorの「設定」をクリック。
「ユーザーにエディターの切り替えを許可」を「はい」に変更し、「変更を保存」します。

これで投稿画面でエディターを切り替えられるようになりました。

参考：https://selifelog.com/blog-entry-2291.html

Favorite

WordPressで、DDoS攻撃を防止するには、Pingback機能を無効化することで防げますが、機能を停止するすることになるのでメリット・デメリットなど検討する必要性があります。
→不正ログイン攻撃についてはこちら

DoS攻撃

DoS攻撃（Denial of Service attack：サービス不能攻撃）は、昔からある攻撃手法の一種です。
攻撃の目的は、サービスを妨害したり、停止させたりすることにあります。

DoS攻撃にはさまざまな手法がありますが、
対象のサイトやサーバーに対して複数のコンピューターから大量に行うものを「DDoS攻撃（Distributed Denial of Service attack）」（分散型サービス拒否攻撃）と言います。

Pingback機能

WordPressには自分自身のサイトに対する言及を第三者が行った場合、
それを通知する機能として「Pingback」という仕組みがあります。
他のブログから通知 (ピンバック・トラックバック) を受け付ける機能のことです。

この仕組みをDDos攻撃に悪用されることがあります。
この攻撃でサイトの改ざんなどはありませんが、別のサーバーやサイトに対して、知らない間に攻撃の手助けをしてしまうことがあります。

初期状態のWordPressでは、Pingback機能が有効になっているので、
運用上必要でない場合、無効化しておくことでセキュリティ度は増します。

Pingback機能の無効化

WordPressのPingback機能を悪用したDDos攻撃を防ぐには、Pingback機能を無効化することでリスクを防げます。最近はスパムのトラックバックやコメントが多いので、Pingback機能は無効化してしまって問題ない場合が多いと思います。
→内部リンクのピンバック機能のみ停止する方法

Pingback機能の無効化
管理画面から「設定」→「ディスカッション」→「投稿のデフォルト設定」と進み、「他のブログからの通知 (ピンバック・トラックバック) を受け付ける」のチェックを外すと無効化されます。

すでに投稿している記事のPingback機能の無効化
管理画面から「投稿」→「投稿一覧」へ進み、
タイトルの横にあるチェックボックスを全てオン→プルダウンの「一括操作を編集」にして「適用」ボタンを押します。

次の画面右に「トラックバック/ピンバック」という欄があるので、プルダウンを「許可しない」にして「更新」ボタンを押すと無効化されます。

未知のウイルスへの対応力が違います。「ESETセキュリティソフト」

参考：https://help.sakura.ad.jp/rs/2162/
https://rgbdesign.jp/必ずやっておきたいwordpressのセキュリティ/
https://asahinablog.com/archives/2990
https://digitalnavi.net/wordpress/6938/

Favorite

SNSシェアボタンを設置するプラグイン

AddToAny Share Buttons

このサイトにも使っています。
このページの本文の上下に設置しています。

SNS以外にもGメールへの送信だったり、印刷ボタンやリンクのコピー機能もあったり汎用的に使えます。

参考：https://netaone.com/wp/wordpress-sns-plugin/

Favorite

ファイルのアクセス権限（パーミッション）をデフォルトから変更することでセキュリティ対策をします。

wp-config.phpは、データベースにログインするためのIDとパスワードが記載されているため、最も重要な設定ファイルになります。

設定内容を見られると、データベースにアクセス出来るようになり、データを削除されたり盗まれたりする可能性が高まります。

デフォルトのアクセス権限は「644」なので、所有者以外も内容を見ることが可能な状態です。

アクセス権限を「644」から「600」にし、所有者だけが読み書きできる状態に変更します。

WEBサイトの改ざん監視なら【SiteLock（サイトロック）】

参考：https://www.mubag.com/blog/wordpress-security-plugin/

Favorite

不正ログイン攻撃には、総当たり攻撃やブルートフォースアタック(Brute-force attack)と呼ばれる第3者が想定される認証情報を入力してログインできるか調べる攻撃や、辞書攻撃と言われる良く使われるパスワードを「辞書」的に登録し攻撃に利用するなどがあります。
→DDoS攻撃についてはこちら

総当たり攻撃（ブルートフォースアタック）は、試行を繰り返すことでパスワードを特定する攻撃になりますが、最近のパソコンは処理スピードが早いため、パスワードが数字4桁程度の場合、数秒で突破できてしまいます。

使用する文字の種類と文字数での組み合わせパターン数は以下の通りとなります。単純な組み合わせで文字数も少ないとパターン数が意外と少ないことに気付くと思います。

不正ログイン攻撃の流れ

WordPressの場合、以下の流れで不正ログイン攻撃が行われます。

1.ログイン用URLの特定
変更を加えていない場合、ログインURLは、wp-login.phpとなる。
→SiteGuard WP Pluginで変更可能

2.管理者用ユーザIDの特定
WordPressへ特定のリクエストをすることで、存在する管理者用ユーザIDを取得することができる。
→Edit Author Slugで対応可能

3.ユーザIDとパスワードを送信する
総当たり攻撃（ブルートフォースアタック）、辞書攻撃、もしくはその両方の組み合わせなどで行われます。
→画像認証を追加する

4.返答されるHTTPヘッダを確認する
ユーザIDとパスワードが一致した場合、「Status 302」としてLocationヘッダにダッシュボードのURLを返します。(失敗時は「Status 200」となる。)

5.ダッシュボードへログインする
ログインした後は任意のコードを記述したり、任意のファイルを設置したり、様々な悪意ある改ざんが自由に出来てしまいます。

STEP5も、プラグインなど余分なファイルを削除・整理しておくことで改ざん後の特定が可能になったり、被害を最小限にすることが出来ます。

不正ログイン攻撃を防ぐには

逆に考えると、これらのSTEP4までのどこかのステップを防ぐことで不正ログイン攻撃を未然に防ぐことが可能になります。

複数対策することで、よりセキュリティ度は向上しますが、普段の運用に差し支えないレベルでの対策が望ましいので、各自でどこまで対応するかなど検討が必要かもしれません。

私の個人的な優先順は…

管理者用ユーザID→Edit Author Slugで対応可能
　↓
ユーザIDとパスワード→画像認証を追加
　↓
ログイン用URL→SiteGuard WP Pluginで変更

最後のログインURLの変更はAWSでは出来ないため、設定に汎用性を持たせるため優先順位を下げています。

WEBサイトの改ざん監視なら【SiteLock（サイトロック）】

参考：https://knowledge.sakura.ad.jp/4248/
https://ja.wikipedia.org/wiki/総当たり攻撃
https://ja.wikipedia.org/wiki/辞書攻撃

Favorite

投稿画面などで定型文を挿入するのに便利なプラグイン

AddQuicktag

インストール後、有効化し
「設定」→「AddQuicktag」と進み、
「ボタン名」と「ラベル名」を入力
（投稿画面ではボタン化されるので分かりやすい短めの文字が良い）
　↓
「開始タグ」に挿入したい定型文を登録します。
横のチェックボタンは「post」のみ入れておけば、通常の記事投稿には充分です。

参考：https://wp-sensei.net/2047/

Favorite

これも色々調べていて初めて知ったのでメモも兼ねて…

WordPressの検索で全角スペースを入れて検索すると
検索0件になるバグがあります。（全角は全て文字と認識しているため、全角スペース前後を含む一語と誤認してしまうようです。）

これを防ぐため、下記のコードをテンプレートファイル内にある
functions.phpの一番最後に追記します。

これで全角スペースを半角スペースに置換して検索してくれます。

//全角スペースを含んだ検索のバグ修正
function empty_search( $query ) {
    if ( $query->is_main_query() && $query->is_search && ! $query->is_admin ) {
    $s = $query->get( 's' );
    $s = str_replace('　',' ', $s );
    $query->set( 's', $s );
    }
}
add_action( 'pre_get_posts', 'empty_search' );

参考：https://sologaku.com/wordpress/site-search-support-emspace/
https://yululy.com/ワードプレスの全角空白で検索結果がおかしい件/

このサイトには現状使っていませんが、
仕事でWordPressのサイトを構築する際に必須で使用しています。

SiteGuard WP Plugin

サイトへの不正アクセスのほとんどの攻撃は海外からの場合が多いため、
管理画面へのログインの際、日本語の画像認証でログインするようにしています。

ログイン画面のURLを変更する機能もありますが、
AWSサーバーでは使えないなどもあるので、これは使用しないのを基本にしたほうが汎用的な設定に出来るかもしれません。

WEBサイトの改ざん監視なら【SiteLock（サイトロック）】

Favorite

WordPressのセキュリティ対策のひとつに「余分なプラグインを削除する」というものがあります。

ただ、最初からインストールされているプラグインはなかなか削除しにくいものです。

Hello Dollyは世界ではじめて作られたWordPressのプラグインとして最初からインストールされていますが、削除してしまっても特に問題ないため削除してしまいましょう。

「プラグイン」→「インストール済みプラグイン」と進み
Hello Dollyの「削除」をクリックします。

これで余分なプラグインをひとつ削除でき、少しだけセキュリティが向上しました。

WEBサイトの改ざん監視なら【SiteLock（サイトロック）】

参考：https://sologaku.com/wordpress/hello-dolly/

Favorite

これは初めて知ったのでメモも兼ねて…

WordPressの初期設定では/?author=1にアクセスすると管理者のIDが分かってしまうため、セキュリティ上、弱い部分になります。
（リダイレクトでURLに管理者IDが出てしまう。）

Edit Author Slugというプラグインを使うと簡単にセキュリティをアップ出来ます。

Edit Author Slug

まず、WordPressの管理画面上で
「プラグイン」→「新規追加」と進みEdit Author Slugで検索をします。
インストール→有効化し、次に

「ユーザー」→「ユーザー一覧」に進みます。
「管理者」のIDをクリックし、プロフィールの一番下までスクロールし、
「投稿者スラッグ」を初期設定から変更します。

これだけだとユーザーID＝表示名になっている場合が多いので
同じページの中段…「ニックネーム (必須)」と「ブログ上の表示名」も変更すると完璧です。

このサイトの動作を確認してみてください。
https://www.uki213.com/memo/?author=1
（リダイレクトされてもIDではなく設定したスラッグの「1」がURLに出ます。）

設定内容としては、
「投稿者スラッグ」を上から二番目の数字（今回の場合「1」）
「ニックネーム (必須)」と「ブログ上の表示名」もそれに合わせて「1」に変更しています。

管理者を複数設定している場合は同様の設定変更を行っていきます。
（管理者は必要最低限にしたほうがセキュリティ対策としても良いかもしれません。）

WEBサイトの改ざん監視なら【SiteLock（サイトロック）】

参考：https://sologaku.com/wordpress/redirect-security/

Favorite