ホームページ構築

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で使うことができます。

Mastodonのウィジェット

ブログパーツの少なさ

Mastodonの初期設定などが済んだので、このブログのサイドバーに自分のタイムラインが表示できるウィジェットを探しましたが、WordPress用のプラグインで用意されてるのは1つのトゥートを投稿上に埋め込むものしか見つかりませんでした。

1つだけ見つかったウィジェットを導入してみる

そんな中、1つだけMastodonのウィジェットを作成している会社があったので導入してみました。それがこちら 
有限会社アゼット-マストドンウィジェット紹介ページ
用意されているウィザードを使って簡単にコードを作ることができます。
詳しい手順は有限会社アゼット様がQiitaに投稿しているページがわかりやすいです。
Qiita-マストドンのタイムライン表示ウィジェットを作成しました。

ファイルアップロード後にエラーが

自分の環境では、ダウンロードした3つのファイルをWPがインストールされているディレクトリ直下に配置しました。

その後、Insert Headers and Footersプラグインでヘッダー内にマストドンウィジェット作成ウィザードで作成された1つ目のコードを、外観-ウィジェットのページでカスタムHTMLを使い2つ目のコードをサイドバーに配置しました。

追記(2018年10月10日):WordPressではCSSファイルとJSファイルを読み込ませるには別な方法を取らなくては行けないことがわかりました。
詳細はこちらの記事にまとめました。
MastodonウィジェットをWordPressに正しい方法で読み込ませる

これで表示されると思ったのですが、表示されませんでした。

F12を押して見ると

Uncaught TypeError: $ is not a function
at new MastodonApi (mastodon.widget.js:31)

と、出てしまいました。

エラーの解決方法

このエラーについて調べてみると、WPとjQueryの関係があるとわかりました。
jQueryと他のjavascriptライブラリがコンフリクトしないようにjQueryが使用する”$”という関数の別名定義を未定義状態にしているようです。

いろいろ解決方法はあるようですが、自分は必要な”$”をjQueryに置き換える方法を取りました。
置き換えた文字列は以下の通りです。

mastodon.widget.jsファイルの
“$(“を”jQuery(“に置換
“$.ajax”を”jQuery.ajax”に置換

以上2点を置き換えた結果、無事ウィジェットを動作サせることができました。
※$をすべてjQueryに置き換えると、トゥートの時刻表示部分がおかしくなりました。

修正後のファイル一式ダウンロードはこちら

今回、有限会社アゼット様にご了承いただきまして、修正後のファイルをダウンロードできるようにして良いとの事でしたので、こちらで公開します

ダウンロードはこちら

追記(2018年10月10日);2018年10月3日にリリースされたv1.07に対応しました。

以上、Mastodonウィジェットの紹介でした。
では、また~