使い方

「Internal Link Block」は、WordPressのGutenbergエディターを使って簡単に内部リンクを追加できるプラグインです。以下の手順で使用できます。

1. プラグインのインストールと有効化

  1. WordPressの管理画面にログインします。
  2. 左メニューの「プラグイン」→「新規追加」をクリック。
  3. プラグインをアップロードする場合は、「プラグインのアップロード」ボタンをクリックし、internal-link-block フォルダをZIP形式でアップロードします。
  4. インストールが完了したら、「有効化」をクリックしてプラグインを有効化します。

2. ブロックの追加

  1. 投稿またはページの編集画面を開きます（Gutenbergエディターを使用）。
  2. ブロック追加ボタン（「+」アイコン）をクリックし、「Internal Link Block」を検索して追加します。
    • ブロックが見つからない場合は、「すべてのブロックを表示」から「Internal Link Block」を探してください。

3. 内部リンクの検索と追加

  1. ブロックが追加されると、検索エリアが表示されます。
  2. Search Keyword フィールドにキーワードを入力して、関連する投稿を検索します。
    • 例: 「パリ旅行」と入力すると、関連する記事が表示されます。
  3. Category ドロップダウンからカテゴリーを選択して、検索結果を絞り込むこともできます。
  4. 「Search Posts」ボタンをクリックすると、検索結果が表示されます。
  5. 表示された投稿の中からリンクしたい記事を選び、クリックして追加します。
    • 追加したリンクは下部の「選択済みリンク」エリアに表示されます。

4. デザインのカスタマイズ

  1. ブロックの右側にある「デザイン設定」パネルを開きます。
  2. 以下の項目をカスタマイズできます：
    • カスタムテキスト：リンクセクションの見出しを変更（デフォルトは「あわせて読みたい」）。
    • テキストカラー：見出しの色をカラーピッカーで変更。
    • 背景カラー：リンクセクション全体の背景色をカラーピッカーで変更。
    • 表示スタイル：スタイル1（小さな画像付き）、スタイル2（大きな画像付き）、スタイル3（画像なし）の3つから選択。
  3. 設定を変更すると、リアルタイムでプレビューが更新されます。

5. リンクの削除

  • 選択済みのリンクを削除したい場合は、「選択済みリンク」エリアで該当リンクの「削除」ボタンをクリックします。

6. 投稿の公開

  • リンクの追加とデザイン設定が完了したら、投稿を保存または公開します。
  • 公開後、フロントエンドでリンクセクションが正しく表示されるか確認してください。

注意点

「Internal Link Block」を使用する際には、以下の点に注意してください。

1. Gutenbergエディター専用

  • このプラグインはGutenbergエディター専用です。クラシックエディターや他のページビルダー（Elementor、WPBakeryなど）では動作しません。Gutenbergエディターが有効になっていることを確認してください。

2. 投稿データの依存

  • 内部リンクの検索は、WordPressの投稿データ（postタイプ）に依存しています。カスタム投稿タイプ（例: portfolio や product）はデフォルトでは検索対象に含まれません。カスタム投稿タイプを検索対象に含めたい場合は、コードの修正が必要です。

3. アイキャッチ画像の設定

  • スタイル1およびスタイル2では、投稿のアイキャッチ画像が表示されます。リンク先の投稿にアイキャッチ画像が設定されていない場合、画像が表示されないため、デザインが崩れる可能性があります。すべての投稿にアイキャッチ画像を設定することをおすすめします。

4. キャッシュの影響

  • キャッシュプラグイン（W3 Total Cache、WP Super Cacheなど）を使用している場合、デザイン変更がすぐに反映されないことがあります。変更後にキャッシュをクリアしてください。
  • ブラウザキャッシュも影響する場合があるため、シークレットモードで確認するか、キャッシュをクリアして動作を確認してください。

5. 既存ブロックとの互換性

  • プラグインのアップデートやブロック名の変更（例: internal-link-block/link を変更した場合）を行った場合、以前の投稿で使用していたブロックが「サポートされていないブロック」として表示される可能性があります。この場合、該当ブロックを削除して新しく追加する必要があります。

6. パフォーマンスへの影響

  • 多くのリンクを一度に追加する場合や、投稿数が非常に多いサイトでは、検索処理に時間がかかることがあります。サイトのパフォーマンスに影響を与えないよう、必要最低限のリンク数に抑えることをおすすめします。

7. テーマとの干渉

  • 使用しているテーマのCSSが「Internal Link Block」のスタイルに干渉する場合があります。デザインが期待通りに表示されない場合は、テーマのCSSを調整するか、style.css にカスタムCSSを追加して対応してください。

デフォルトのカラーピック値を変更する方法

「Internal Link Block」では、テキストカラーと背景カラーのデフォルト値を以下のように設定しています：

  • テキストカラー：#4caf50（緑色）
  • 背景カラー：#fff9e6（薄いベージュ）

これらのデフォルト値を変更するには、src/index.js 内の attributes セクションを修正します。

修正箇所

src/index.js

以下の部分を変更します。

registerBlockType('custom-internal-link/link', { title: 'カスタム内部リンク', icon: 'admin-links', category: 'common', attributes: { keyword: { type: 'string', default: '' }, category: { type: 'string', default: '' }, selectedLinks: { type: 'array', default: [] }, customText: { type: 'string', default: 'あわせて読みたい' }, textColor: { type: 'string', default: '#4caf50' }, // テキストカラーのデフォルト値 styleType: { type: 'string', default: 'style1' }, backgroundColor: { type: 'string', default: '#fff9e6' } // 背景カラーのデフォルト値 }, // 以下省略 });

変更例

例えば、以下の値に変更したい場合：

  • テキストカラー：#ff0000（赤色）
  • 背景カラー：#e0e0e0（薄いグレー）

以下のように修正します。

registerBlockType('custom-internal-link/link', { title: 'カスタム内部リンク', icon: 'admin-links', category: 'common', attributes: { keyword: { type: 'string', default: '' }, category: { type: 'string', default: '' }, selectedLinks: { type: 'array', default: [] }, customText: { type: 'string', default: 'あわせて読みたい' }, textColor: { type: 'string', default: '#ff0000' }, // 赤色に変更 styleType: { type: 'string', default: 'style1' }, backgroundColor: { type: 'string', default: '#e0e0e0' } // 薄いグレーに変更 }, // 以下省略 });

修正後の手順

  1. TeraPadで編集
    • 上記の変更を src/index.js に反映し、保存。
  2. サーバーにアップロード
    • /wp-content/plugins/custom-internal-link/src/index.js を上書き。
  3. プラグインの再有効化
    • 管理画面で「Internal Link Block」を無効化 → 再度有効化。
  4. 動作確認
    • 新しくブロックを追加し、デフォルトのテキストカラーと背景カラーが変更されているか確認。

注意

  • 既存のブロックにはデフォルト値の変更が反映されません。新しいブロックを追加するか、既存ブロックのカラーを手動で変更してください。
  • カラーピッカーで選択する色は、サイトのテーマカラーやデザインに合わせて選ぶと統一感が出ます。

FAQ（よくある質問）

Q1: プラグインが動作しない場合、どうすればいいですか？

A: 以下の点を確認してください：

  • Gutenbergエディターが有効になっているか確認してください。クラシックエディターでは動作しません。
  • 他のプラグインとの競合が考えられます。一度すべてのプラグインを無効化し、「Internal Link Block」だけを有効にして動作を確認してください。
  • ブラウザのコンソール（F12 → コンソールタブ）でエラーが出ていないか確認し、エラーメッセージがあればその内容を元に調査してください。
  • キャッシュプラグインを使用している場合、キャッシュをクリアしてください。

Q2: カスタム投稿タイプを検索対象に含めることはできますか？

A: デフォルトでは、post タイプのみが検索対象です。カスタム投稿タイプ（例: product や portfolio）を検索対象に含めるには、custom-internal-link.php の get_posts 関数を修正する必要があります。以下の部分を変更します。

$posts = get_posts(array('post_type' => 'post', 'numberposts' => -1));

を以下のように変更：

$posts = get_posts(array('post_type' => array('post', 'product', 'portfolio'), 'numberposts' => -1));

この例では、post、product、portfolio を検索対象に含めています。

Q3: アイキャッチ画像が表示されない場合、どうすればいいですか？

A: 以下の点を確認してください：

  • リンク先の投稿にアイキャッチ画像が設定されているか確認してください。設定されていない場合、画像は表示されません。
  • スタイル3を選択している場合、アイキャッチ画像は表示されません。スタイル1またはスタイル2を選択してください。
  • 画像のURLが正しく取得できていない場合、custom-internal-link.php の wp_get_attachment_image_src 関数が正しく動作しているか確認してください。

Q4: デザインがテーマと干渉して崩れる場合、どうすればいいですか？

A: テーマのCSSが「Internal Link Block」のスタイルに干渉している可能性があります。以下の方法で対応してください：

  • src/style.css または src/editor.css にカスタムCSSを追加し、テーマのスタイルを上書きします。例： css折りたたむたたむコピー.custom-internal-link { background: #e0e0e0 !important; }
  • テーマのCSSを調整して、干渉しないようにします。テーマの style.css を編集するか、子テーマを使用してカスタマイズしてください。

Q5: リンクを追加した後、表示が更新されない場合、どうすればいいですか？

A: 以下の点を確認してください：

  • キャッシュプラグインを使用している場合、キャッシュをクリアしてください。
  • ブラウザキャッシュが影響している可能性があるため、シークレットモードで確認してください。
  • ブロックの設定が正しく保存されているか確認してください。投稿を一度保存し、ページをリロードしてみてください。

Q6: プラグインをアップデートした後、既存のブロックが「サポートされていないブロック」になった場合、どうすればいいですか？

A: プラグインのアップデートでブロック名や構造が変更された場合、既存のブロックが「サポートされていないブロック」として表示されることがあります。この場合、以下の手順で対応してください：

  1. 該当するブロックを削除します。
  2. 新しく「Internal Link Block」を追加し、リンクを再設定します。
  3. 重要なデータが失われないよう、投稿のバックアップを取ることをおすすめします。

Q7: プラグインを削除した場合、追加したリンクはどうなりますか？

A: プラグインを削除すると、「Internal Link Block」で追加したブロックは「サポートされていないブロック」として表示されます。リンク自体は投稿データ内に残っていますが、表示されなくなります。プラグインを再インストールするか、ブロックを別の形式（例: 通常のリンク）に変換してください。

テスト手順

  1. TeraPadで編集
    • 上記の custom-internal-link.php（プラグイン名変更済み）を確認し、必要に応じて保存。
    • デフォルトカラーを変更する場合は、src/index.js を修正。
  2. サーバーにアップロード
    • /wp-content/plugins/custom-internal-link/ にファイルを上書き。
  3. プラグインの再有効化
    • 管理画面で「Internal Link Block」を無効化 → 再度有効化。
  4. 動作確認
    • 使い方通りにブロックを追加し、動作を確認。
    • デフォルトカラーが変更されているか確認（カラーを変更した場合）。

お願い

  • 使い方と注意点が分かりやすかったか、または追加してほしい内容があれば教えてください。
  • FAQの内容が適切か、追加の質問が必要か教えてください。
  • デフォルトカラーの変更方法が分かりやすかったか、実際に変更してみて問題がなかったか教えてください。