こんにちは。ゆっきぃです🙂
今回は、WordPressテーマ JIN で吹き出しの画像が表示されない時に、年月ベースのフォルダを使わないで対処する方法を２つ解説します。
公式マニュアルの方法で対応できない方は、読んでみてください！
メディア設定～年月ベースのフォルダー～
この記事に行き着いた方は、メディア設定で画像の保存方法を変更している(年月ベースのフォルダーに整理のチェックを外している)方が多いのかなと思います。
JINでの症状
JINでは、メディアの設定で、年月ベースのフォルダに整理にチェックが入っていないと、吹き出しの画像が表示されません。
上記のような空白になったり、リンク切れのアイコンが出たりします。
これはもうJINの仕様なので仕方ありません。
吹き出しのショートコードに画像のファイル名を入力すると、画像をアップロードした年月フォルダに自動的に探しに行くという仕組みになっています。
しかし、年月フォルダのチェックを外している人は、探しに行く年月フォルダが存在しないため、ファイルが探せないというわけです。
フォルダ分けしない長所と短所
初期設定では、年月ベースのフォルダに整理にチェックが入っています。
このチェックを外し、フォルダ分けしない事でのメリットがいくつかあります。
- 画像のURLが短くなる
- 画像を上書き更新できる
- 画像の保存場所を探しやすい
- 古い記事を使いまわしできる
反対にフォルダ分けしないことで発生するデメリットもあります。
- フォルダ内のファイル数が膨大になる
- バックアップしたい時に地獄を見る
- プラグインでより詳細に対応できる
- JINで吹き出しが表示できなくなる
こちらの記事では、メリット・デメリット、おすすめの設定について詳しく解説しています。
https://he-lab.com/entry/wordpress-upload-folder/
JIN公式による解決方法
JINの公式マニュアルにも解決方法が載っています。
[blogcard url=”https://jin-theme.com/manual/fukidashi/”]
テーマ変更を数回している人に多いのですが、WordPressの「年月ベースのフォルダに整理」 にチェックが入っていないことがございます。
WordPressの管理画面から「設定」>「メディア」>「年月ベースのフォルダに整理」 と進み、チェックをいれてください。
これでページを更新すると吹き出しが表示されることが多いです。
年月フォルダにチェックを入れてもいい人なら、この解決法がベスト。
ただし理由があってこのチェックを外している人、今さら変えたくないって人は、どうにかして他の方法で対応するしかありません。
年月フォルダを使用しない2つのやり方
自分もこの方法を使い無事に表示されるようになりました。
吹き出し用のフォルダを作る方法
最初にご説明するのは、吹き出し用のフォルダを作る方法です。
最も簡単なやり方です
テーマをアップデートしてもそのまま使えます
FTPの知識をちょっぴり使います
吹き出し用画像を追加する時はFTPが必要です
操作方法
FTPソフトで、WordPressのルートディレクトリ(フォルダ)に移動します。
以下のような構成が多いです。
(FTPで設定済みの場合は直でRootにいけます)
ドメイン名 >> public_html
※wp-admin wp-content wp-includes の3つのディレクトリがあればそこが、WordPressのRootディレクトリです。
次に、画像のアップロード先のディレクトリに移動します。
wp-content >> uploads
uploadsディレクトリの中に適当なディレクトリを新規作成します。
(不都合が出る可能性もあるので年と同じ数字4文字標記にしました)
2020
今作成したディレクトリを開き、その中にディレクトリを新規作成します。
(不都合が出る可能性もあるので月と同じ数字2文字標記にしました)
01
以上で、uploads >> 2020 >> 01 というディレクトリの構成ができました。
後は、吹き出し用に使う画像のみをuploads から、01 に移動してください。
以降もメディアライブラリで普通にアップロードした画像はuploads に保存されます。
吹き出し用画像を追加したいときはその都度、01 の中にFTPで入れるようにしてください。
テーマエディターでコードを編集する方法
2つ目は、custom-shortcode.phpを編集する方法です。
余計なディレクトリを増やしません
FTPを使わずWordPress内で完結します
コピペするだけでもOKです
コードを変更するリスクがあります
PHPの知識がちょっぴり必要です
テーマのアップデートで元に戻ります(再度実行する必要あり)
操作方法
メニューバーの外観[jin_icon_arrowright color=”#e9546b” size=”16px”]テーマエディターを選択
「理解しました」をクリック
編集するテーマを選択で、JINが選ばれていることを確認する。
(違うテーマになっていたらJINを選んで選択ボタンをクリック)
テーマファイルの項目を「include▶」が出るまで、下にスクロールする。
「include▶」をクリックして項目を展開する。
「custom-shortcode.php」をクリック。
テーマの編集の「選択したファイルの内容：」が、custom-shortcode.phpの中身に切り替わります。
だいたい550行目付近まで下に一気にスクロールします。
(環境やバージョンによって行数は異なります。500~600行あたりにあるはず。)
550行目付近で「balloon_shortcode」と書いてある行を見つけます。
ゆっくり下にスクロールします。
「//ファイル名からファイルのパスを取得」と書いてある行を探します。
その10行くらい下に「break;」と書いてあるのを見つけます。
「//ファイル名からファイルのパスを取得」の下に改行で1行スペースを開けます。
※「～パスを取得」の後ろか、「$result～」の前をカーソルで指定しエンターで改行できます。空白行に // が入力されてしまったらバックスペースで消してください。
「break;」の前にも改行で2行分スペースを開けてください。
上の空白行に /* 修正START */ と入力します
下の空白行の2段目(break;の上の行)に /* 修正END */ と入力します。
/* 修正START */
/* 修正END */
これで修正箇所がわかりやすいようにコメントで囲めました。
※ /* */ の内側はコメントなので、修正開始・修正終了とか、ここから・ここまでとか、好きな言葉でかまいません。
先程囲った範囲のうち、文字や括弧が入力されている行の先頭に // を付けます。
この例だと上7行、下2行になります。
「// ファイルパスをURLに変更」は、もう//がついているので加えなくてOKです。
//
※// も先程の /* */ と同じようにコメントを記入する記号です。// を加えたことにより、元々書いてあったプログラムがただの説明書きになって、実行されなくなります。
/* 修正END */の上の空白行に、下の一文を入力してください。
$imageUrl = $baseurl.’/’.$face;
※写真だと行の開始の$が縦一列に揃っていますが、インデントがズレていても問題ありません。気になる方は「半角スペース」か「Tabキー」で揃えられます。
これで入力はすべて完了です。
念の為、もう一度見比べてみてください。
特に $imageUrl = $baseurl.’/’.$face; の最後の「 ; (セミコロン)」がちゃんと付いているか確認します。
問題なければ、「ファイルを更新」をクリックして変更を保存してください。
まとめ
さて、実際に表示されるようになりましたでしょうか。
今回は公式＋２つの方法をご紹介しました。
特にこだわりがなければ、年月ベースにチェックを入れる公式マニュアルの方法で問題ありません。
FTPが使えるなら、吹き出し画像だけ別フォルダを作ってしまったほうが手っ取り早いです。
PHPをいじって色々カスタマイズしてみたいって方は、コードの編集に挑戦してみましょう。バグったらテーマを再インストールすれば元に戻ります😓
吹き出しを上手く活用すると、文章のテンポが良くなったり、心に語りかけるような会話ができたりと表現の幅が広がりますよ。ぜひ使ってみてくださいね。
それではまた、次回の記事でお会いしましょう👋