WordPress

【JIN】吹き出し画像に年月ベースのフォルダーを使わない方法【WordPress】

JIN 吹き出しTOP

こんにちは。ゆっきぃです🙂

今回は、WordPressテーマ JIN で吹き出しの画像が表示されない時に、年月ベースのフォルダを使わないで対処する方法を2つ解説します。

公式マニュアルの方法で対応できない方は、読んでみてください!

 

メディア設定~年月ベースのフォルダー~

wordpress メディア 年月ベース

 

この記事に行き着いた方は、メディア設定で画像の保存方法を変更している(年月ベースのフォルダーに整理のチェックを外している)方が多いのかなと思います。

 

 

JINでの症状

吹き出し 消える

JINでは、メディアの設定で、年月ベースのフォルダに整理にチェックが入っていないと、吹き出しの画像が表示されません。

上記のような空白になったり、リンク切れのアイコンが出たりします。

 

これはもうJINの仕様なので仕方ありません。

吹き出しのショートコードに画像のファイル名を入力すると、画像をアップロードした年月フォルダに自動的に探しに行くという仕組みになっています。

しかし、年月フォルダのチェックを外している人は、探しに行く年月フォルダが存在しないため、ファイルが探せないというわけです。

 

 

フォルダ分けしない長所と短所

初期設定では、年月ベースのフォルダに整理にチェックが入っています。

このチェックを外し、フォルダ分けしない事でのメリットがいくつかあります。

  1. 画像のURLが短くなる
  2. 画像を上書き更新できる
  3. 画像の保存場所を探しやすい
  4. 古い記事を使いまわしできる

 

反対にフォルダ分けしないことで発生するデメリットもあります。

  1. フォルダ内のファイル数が膨大になる
  2. バックアップしたい時に地獄を見る
  3. プラグインでより詳細に対応できる
  4. JINで吹き出しが表示できなくなる

 

 

こちらの記事では、メリット・デメリット、おすすめの設定について詳しく解説しています。

年月ベースのフォルダー TOP
画像を年月ベースのフォルダーに整理する長所と短所【WordPress メディア設定】WordPressのメディア設定「アップロードしたファイルを年月ベースのフォルダーに整理」のチェックについて、どちらの管理方法がいいのか考察。結果的に年月ベースのフォルダ分けのままをおすすめします。...

 

 

JIN公式による解決方法

JINの公式マニュアルにも解決方法が載っています。

 

 

テーマ変更を数回している人に多いのですが、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で入れるようにしてください。

 

FTPを使うのでちょっと面倒ですが、吹き出し画像はそれほど頻繁に追加するものでもないと思いますので、それほど煩雑でないかと思います。

 

 

テーマエディターでコードを編集する方法

2つ目は、custom-shortcode.phpを編集する方法です。

余計なディレクトリを増やしません

FTPを使わずWordPress内で完結します

コピペするだけでもOKです

コードを変更するリスクがあります

PHPの知識がちょっぴり必要です

テーマのアップデートで元に戻ります(再度実行する必要あり)

 

 

操作方法

JIN テーマエディタ

メニューバーの外観[jin_icon_arrowright color=”#e9546b” size=”16px”]テーマエディターを選択

 

 

JIN テーマエディタ

「理解しました」をクリック

 

 

JIN テーマエディタ

編集するテーマを選択で、JINが選ばれていることを確認する。

(違うテーマになっていたらJINを選んで選択ボタンをクリック)

 

 

JIN テーマエディタ 吹き出し

テーマファイルの項目を「include▶」が出るまで、下にスクロールする。

 

 

JIN テーマエディタ 吹き出し

「include▶」をクリックして項目を展開する。

 

 

JIN テーマエディタ 吹き出し

「custom-shortcode.php」をクリック。

 

 

JIN テーマエディタ 吹き出し

テーマの編集の「選択したファイルの内容:」が、custom-shortcode.phpの中身に切り替わります。

だいたい550行目付近まで下に一気にスクロールします。
(環境やバージョンによって行数は異なります。500~600行あたりにあるはず。)

 

 

JIN テーマエディタ 吹き出し

550行目付近で「balloon_shortcode」と書いてある行を見つけます。

ゆっくり下にスクロールします。

 

 

JIN テーマエディタ 吹き出し

「//ファイル名からファイルのパスを取得」と書いてある行を探します。

その10行くらい下に「break;」と書いてあるのを見つけます。

 

 

JIN テーマエディタ 吹き出し

「//ファイル名からファイルのパスを取得」の下に改行で1行スペースを開けます。

※「~パスを取得」の後ろか、「$result~」の前をカーソルで指定しエンターで改行できます。空白行に // が入力されてしまったらバックスペースで消してください。

「break;」の前にも改行で2行分スペースを開けてください。

 

 

JIN テーマエディタ 吹き出し

上の空白行に /* 修正START */ と入力します

下の空白行の2段目(break;の上の行)に /* 修正END */ と入力します。

 

/* 修正START */

/* 修正END */

これで修正箇所がわかりやすいようにコメントで囲めました。

※ /*  */ の内側はコメントなので、修正開始・修正終了とか、ここから・ここまでとか、好きな言葉でかまいません。

 

 

JIN テーマエディタ 吹き出し

先程囲った範囲のうち、文字や括弧が入力されている行の先頭に // を付けます。

この例だと上7行、下2行になります。

「// ファイルパスをURLに変更」は、もう//がついているので加えなくてOKです。

//

※// も先程の /* */ と同じようにコメントを記入する記号です。// を加えたことにより、元々書いてあったプログラムがただの説明書きになって、実行されなくなります。

 

 

JIN テーマエディタ 吹き出し

/* 修正END */の上の空白行に、下の一文を入力してください。

$imageUrl = $baseurl.’/’.$face;

※写真だと行の開始の$が縦一列に揃っていますが、インデントがズレていても問題ありません。気になる方は「半角スペース」か「Tabキー」で揃えられます。

 

 

JIN テーマエディタ 吹き出し

これで入力はすべて完了です。

念の為、もう一度見比べてみてください。

特に $imageUrl = $baseurl.’/’.$face; の最後の「 ; (セミコロン)」がちゃんと付いているか確認します。

 

問題なければ、「ファイルを更新」をクリックして変更を保存してください。

 

 

まとめ

さて、実際に表示されるようになりましたでしょうか。

今回は公式+2つの方法をご紹介しました。

特にこだわりがなければ、年月ベースにチェックを入れる公式マニュアルの方法で問題ありません。

 

FTPが使えるなら、吹き出し画像だけ別フォルダを作ってしまったほうが手っ取り早いです。

PHPをいじって色々カスタマイズしてみたいって方は、コードの編集に挑戦してみましょう。バグったらテーマを再インストールすれば元に戻ります😓

 

吹き出しを上手く活用すると、文章のテンポが良くなったり、心に語りかけるような会話ができたりと表現の幅が広がりますよ。ぜひ使ってみてくださいね。

 

それではまた、次回の記事でお会いしましょう👋

 

ABOUT ME
ゆっきぃ
2019年ブログを本格稼働。 世界一周をはじめとした旅行、趣味、ビジネスについて投稿していきます。