Webデザイナー 日々のメモ

プラグインを使うと目次を自動的に付けることが出来ます。
様々なプラグインがありますが、Easy Table of Contentsが細かな設定が出来るので使いやすいです。

Easy Table of Contents

参考：https://www.onamae.com/column/wordpress/11/

カテゴリーIDからカテゴリー一覧ページへのURLを取得するコードを記述しておくことで
カテゴリー名やスラッグを変更してもURLが自動的に修正されます。

※「カテゴリーID」には数字を入れます。

<?php echo esc_url(get_category_link('カテゴリーID')); ?>

参考：https://hacknote.jp/archives/6022/

WordPressの記事に紐付いたタグを取得するためのコードです。
get_the_tagsを使用します。

WordPressに登録されている全てのタグを取得する場合はget_tagsを使用します。
get_tagsの使い方はコチラの記事でサイドバーへのタグ一覧表示方法にて紹介しています。

基本

<?php the_tags('前', '区切り文字', '後'); ?>

タグの名前だけを表示

下記の参考コードはタグ名の前後をspanで囲うようにしています。

<?php 
  $tags = get_the_tags();
  foreach ( $tags as $tag ) {
    echo '<span>' . $tag->name . '</span>';
  }
?>

その他

上の参考コードの4行目をそれぞれ変えると出力できます。

参考：http://kawatama.net/web/629
https://thewppress.com/libraries/get-the-tags-array/
https://design-tera.com/blog/archives/2387/
https://recooord.org/wordpress-get-the-tags/

記事に紐付いているカテゴリーをひとつだけ取得する場合、
一行の簡単なコードの記述で取得が可能です。

カテゴリー名の取得

<?php echo get_the_category()[0]->name; ?>

スラッグの取得

<?php echo get_the_category()[0]->slug; ?>

リンクURLの取得

<?php echo get_category_link(get_the_category()[0]->term_id); ?>

カテゴリーIDの取得

<?php echo get_the_category()[0]->cat_ID; ?>

参考：https://wordpress-web.and-ha.com/post-category-name-id-slug/

WordPressで作り込んだデザインなどを実装する場合、
複数カテゴリーを選択できるより、ひとつの記事にひとつのカテゴリーとしておいたほうが
便利な場合が多くあります。

使用しているテンプレートのfunctions.phpに以下のコードを記述します。

//カテゴリーをラジオボタン化
function change_category_to_radio() {
  ?>
<script>
jQuery(function($) {
  // ラジオボタン化
  $('#categorychecklist input[type=checkbox]').each(function() {
    $(this).replaceWith($(this).clone().attr('type', 'radio'));
  });
  // 「新規カテゴリーを追加」を非表示
  $('#category-adder').hide();
  // 「よく使うもの」を非表示
  $('#category-tabs').hide();
});
</script>
<?php
  }
add_action( 'admin_head-post-new.php', 'change_category_to_radio' );
add_action( 'admin_head-post.php', 'change_category_to_radio' );

参考：https://junpei-sugiyama.com/wp-category-radio/

WordPressのサイドバーにタグ一覧を表示するためのコードです。

記事に紐付いたタグの取得はコチラの記事をご参照ください。

登録されている全てのタグを表示

こちらはシンプルに登録されているタグを全て表示するだけのコードです。
登録されている全てのタグを取得するのでget_tagsを使います。

<ul>
  <?php
  $posttags = get_tags();
  if ($posttags) {
    foreach($posttags as $tag) {
      echo '<li><a href="'. get_tag_link($tag->term_id) .'">' . $tag->name . '</a></li>';
    }
  }
 ?>
</ul>

タグの表示件数を制限する

先程のコードは100件でも200件でも登録されただけタグが表示されてしまうので
上位○件というように表示件数を制限するコードになります。

6行目の'number' => 20という部分が20件表示の設定になるので
適宜デザインや登録件数に併せて変更してみてください。

<ul>
<?php
$args = array(
  'orderby' => 'count',
  'order' => 'desc',
  'number' => 20
);
$tags = get_terms('post_tag', $args);
foreach($tags as $value) {
  echo '<li><a href="'. get_tag_link($value->term_id) .'">'. $value->name .'</a></li>';
}
?>
</ul>

参考：https://shu-naka-blog.com/website/wp-taglist2/

WordPressでサイトを構築する際によく使うコード

今回は
「現在のページのURLを取得するコード」

<?php echo get_the_permalink();?>

参考：https://cms-hikaku-navi.com/column/5694/

WordPressでサイトを構築する際や
公開前に記事を準備するのに、サイト全体にパスワード設定をして
見れない状態にしておきたいものです。

WP自体がhtaccessに設定を書き込んだりもするので
あまりいじりたくない部分であったりもするし、
AWSではhtaccessがデフォルト状態では使えないため
プラグインなどで設定するのが簡単です。

Password Protected

参考：https://kinsta.com/jp/blog/password-protect-wordpress-site/

ウェブサイトのSSL化はSSHを使いコマンドで実行する必要がありますが、
Lightsailには、Bitnami HTTPS Configuration Toolという専用のツールが用意されています。

Bitnami HTTPS Configuration Toolは

・証明書の取得
・HTTPSへのリダイレクト
・www有・無（リダイレクト）
・cronでの自動更新

を設定してくれるツールになります。

複雑なコマンドを実行せずにSSL化する事が可能になる便利なツールです。

LightsailのWordPressをSSL化する手順

SSHクライアント、もしくはLightsailのコンソールから
コマンドを実行していきます。

1. 以下のコマンドを実行します。
※アップデートするか聞いてくる場合は「Y」と入力して、再度同じコマンドを実行します。

sudo /opt/bitnami/bncert-tool

2. Domain listにSSL化するドメインを入力します。

3. www付きのドメインが含まれていない場合、対象に含めるか確認されます。
含める場合は「Y」、含めない場合は「n」を選択してください。

4. HTTPからHTTPSへのリダイレクトを有効にするか聞いてきますので「Y」を入力します。

5. www無しのドメインからwww有りのドメインにリダイレクトするか確認されます。
希望する場合は「Y」、しない場合は「n」を選択してください。

6. www有りのドメインからwww無しのドメインにリダイレクトするか確認されます。
希望する場合は「Y」、しない場合は「n」を選択してください。

7. 設定内容が表示されるので確認します。

8. 証明書に関連付けるメールアドレスを入力します。

9. 契約内容が表示されるので確認します。問題なければ「Y」を入力します。
※契約内容にはリンクがあります。

10. SSL化の処理が正常に完了した場合「Success」と表示されます。

11. Enterキー押して完了です。

12. ウェブサイトが正常にSSL化されていることを確認します。

参考：https://soma-engineering.com/wordpress/set-ssl-letsencrypt-lightsail/2021/03/07/

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検定】

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

※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検定】

初期状態だと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/

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/