MastodonウィジェットをWordPressに正しい方法で読み込ませる

以前紹介した方法ではまたエラーがでた

以前のブログ記事
Mastodonのウィジェット
で紹介したMastodonのウィジェットでしたが、また違うエラーが出てしまい動かなくなったので、修正方法をまとめたいと思います。

エラーの内容

トップページでは表示されるが、2ページ目以降に移動した時にウィジェットが表示されなくなるという状況でした。

Chromeでのエラーの内容は
Failed to load resource: the server responded with a status of 404
というエラーで、CSSファイルとJSファイルを見失っている状態でした。

エラーが発生する設定方法

ダウンロードした3つのファイル（CSS・JSファイル）をWPがインストールされているディレクトリ直下に置き、その後、Insert Headers and Footersプラグインでヘッダー内にマストドンウィジェット作成ウィザードで生成された1つ目のコードを記述するという方法でした。

エラーが発生しない正しい読み込ませ方

WordPressでCSSやJSを読み込ませるにはfunctions.phpに関数を用いて記述する方法が正しいようです。

まず、ファイルの置く位置を変更します。
自分はwp-contentの下にmastodon-widgetというディレクトリを作ってそこに3つのファイル（CSS・JS）を入れました。

次に、外観-テーマの編集からfunctions.phpに以下を追記します。
以下は記述例です。URL等個々の環境に合わせて変えてください。

function twpp_enqueue_styles() {
	wp_enqueue_style( 'mastodon-widget-css', '/wp-content/mastodon-widget/mastodon.widget.css' );
}

add_action( 'wp_enqueue_scripts', 'twpp_enqueue_styles' );

function twpp_enqueue_scripts() {
	wp_enqueue_script( 'mastodon-widget-js','/wp-content/mastodon-widget/mastodon.widget.js' );

	wp_enqueue_script( 'mastodon-widget-jp-js','/wp-content/mastodon-widget/mastodon.widget-jp.js' );
}

add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );

wp_enqueue_style関数は
wp_enqueue_style( ‘スタイル名’, ‘CSSまでのURL’ );
wp_enqueue_script関数は
wp_enqueue_script( ‘スプリクト名’, ‘JSまでのURL’ );
で書かれています。
スタイル名・スプリクト名は他と被らないようにしてください。

最後に、Insert Headers and FootersプラグインのHeaderの記述欄に、マストドンウィジェット作成ウィザードで生成された1つ目のコードのうち、4行目以降の

<script>
jQuery(document).ready(function() {
から
</script>

までを記述します。

サイドバーに表示させるには、外観-ウィジェットのページでカスタムHTMLを使いマストドンウィジェット作成ウィザードで生成された2つ目のコードを記述します。

以上でエラーなくMastodonウィジェットをWordPressで使うことができます。