コンテンツ編集画面に公開URLを開くボタンを追加できますか？

コンテンツ定義詳細設定のJavaScript、もしくは項目設定カスタムテンプレートで設定可能です。 設定例は以下を参照してください。

JavaScript

[コンテンツ定義]->[詳細設定]のJavaScript項目に以下を設定すると、プレビューボタンまたは更新ボタンの横に「フロントエンドで確認」のボタンが追加されます。

{literal}
(function() {
  {/literal}
  //フロントエンドURLを取得
  var FRONTEND_BASE_URL = '{$smarty.const.ROOT_URL}';
  {literal}
  document.addEventListener('DOMContentLoaded', function() {
    // Slugの値を取得
    var slugInput = document.querySelector('input[name="slug"]');
    var slugValue = slugInput ? slugInput.value : '';
    
    // Slugが空の場合は何もしない
    if (!slugValue) return;
    
    // プレビューボタンまたは更新ボタンの横に追加
    var targetBtn = document.querySelector('#edit_action_preview_li') || document.querySelector('#edit_action_draft_li');
    if (!targetBtn) return;
    
    // フロントエンドリンク用のボタンを作成
    var frontendLinkDiv = document.createElement('div');
    frontendLinkDiv.className = 'col-auto';
    
    var frontendLinkBtn = document.createElement('a');
    frontendLinkBtn.className = 'btn btn-outline-primary';
    frontendLinkBtn.href = FRONTEND_BASE_URL + '/news/' + encodeURIComponent(slugValue);
    frontendLinkBtn.target = '_blank';
    frontendLinkBtn.innerHTML = '<i class="fa fa-external-link"></i> フロントエンドで確認';
    
    frontendLinkDiv.appendChild(frontendLinkBtn);
    targetBtn.parentNode.insertBefore(frontendLinkDiv, targetBtn.nextSibling);
  });
})();
{/literal}

カスタムテンプレート

[コンテンツ定義]->[項目設定]でSlugのカスタムテンプレートに以下を設定すると、Slugの項目にフロントエンドで確認のリンクが追加されます。

<tr id="disp_topics_id" class="">
  <th class="rounded-0 bg-light">
    <label class="fw-bold">Slug</label>

    <span
      class="text-gray-600 ms-1"
      data-bs-toggle="tooltip"
      title=""
      data-bs-original-title="IDの代わりに識別子を指定できます。"
    >
      <i class="fe fe-help-circle"></i>
    </span>

    <span class="small text-gray-700 ms-2">(ID: {$formData.topics_id|escape})</span>
  </th>

  <td>
    <input
      type="text"
      name="slug"
      value="{$formData.slug|escape}"
      size="80"
      class="form-control"
    />

    {if $formData.slug}
      {assign var="newsId" value=$formData.slug}
    {elseif $formData.topics_id}
      {assign var="newsId" value=$formData.topics_id}
    {/if}

    {if $newsId}
      <span>フロントエンドで確認:</span>
      <a href="{$smarty.const.ROOT_URL}/news/{$newsId|escape:'url'}" target="_blank" rel="noopener noreferrer">
        <i class="fe fe-external-link me-1"></i>{$smarty.const.ROOT_URL}/news/{$newsId|escape}
      </a>
    {/if}
  </td>
</tr>

関連ドキュメント

• カスタムテンプレートの使い方を教えてください。
• 管理画面プラグインを使ってKuroco管理画面に任意のCSSを適用する
• コンテンツ編集画面の表示を変更できますか？
• コンテンツ編集画面の表示を変更する