エントリー

freoの管理用テンプレートをBootstrap3でカスタマイズ

これまでいくつかfreoの管理画面のカスタマイズを紹介してきましたが、それを実装した管理画面のテンプレートを配布しようと以前から思っていましたが、どうせなら Bootstrap3 を使って更にカスタマイズしてみました。

※サンプルは以下のファイルのみです。

  • default.html（ステータス）
  • config.html（設定管理）
  • basis.html（設定管理 ⇒ 本体の設定 ⇒ 基本設定）
  • entry.html（エントリー管理）
  • entry_form.html（エントリー登録）
  • iframe_media.html（インラインフレームでのメディア管理）
  • iframe_media_form.html（インラインフレームでのメディア登録）
  • category.html（カテゴリー管理）

ダウンロード

管理者用テンプレート
【2017/5/22更新⇒5/23再更新】

・ユーザー登録/編集画面が正しく表示できないバグを修正
・Bootstrap関連のファイルを3.3.4⇒3.3.7にバージョンアップ
・Google Feed APIが使用中止になったので、freoの更新ニュース取得をYQL API に変更【5/23追加】

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

  • css/bootstrap.min.css
  • fonts/（丸ごとすべて）
  • js/admin.js
  • js/bootstrap.min.js
  • js/gAjax.js【5/23追加】
  • templates/internals/admin/header.html【5/23追加】
  • templates/internals/admin/user.html
  • templates/internals/admin/user_form.html

※js/admin.js の修正は、

//タブへのリンク
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
} 
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash;
})

を削除したのみです（削除しなくても特に動作に問題はありません）。

※templates/internals/admin/header.html の修正は、<head>～</head>内にある

<script src="https://www.google.com/jsapi"></script>

を削除したのみです（削除しなくても特に動作に問題はありません）。

【2016/1/24更新】

・ページの編集でフィルターの表示が出ないバグを修正（admin/page_form.htmlの392行目にある<!--{/if}-->を378行目の</div>の後に移動）

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

  • templates/internals/admin/page_form.html
【2015/3/21更新】

・プロフィール確認ボタンの修正
・freo公式の更新ニュースの分表示を0詰めに修正（参考）
・Bootstrap関連のファイルを3.3.2 ⇒ 3.3.4にバージョンアップ

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

  • css/bootstrap.min.css
  • fonts/（丸ごとすべて）
  • js/bootstrap.min.js
  • js/gAjax.js
  • templates/internals/admin/profile_form.html
【2015/2/26更新】

・タグクラウドを使わない状態でadmin.jsが機能しなかったのを修正
・ステータス画面に「エントリーを登録する」ボタンを設置
・Bootstrap関連のファイルを3.3.0 ⇒ 3.3.2にバージョンアップ
・上記バージョンアップに伴い、一部のグリフアイコンを変更
・上記バージョンアップに伴い、パンくずリストの配色を修正

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。
（アイコンがうまく表示されない場合は一旦ブラウザのキャッシュをクリアしてみて下さい）

  • css/admin.css
  • css/bootstrap.min.css
  • css/iframe.css←2015/2/27 21:17修正追加
  • fonts/（丸ごとすべて）
  • js/bootstrap.min.js
  • templates/internals/admin/category.html
  • templates/internals/admin/default.html
  • templates/internals/admin/header.html
  • templates/internals/admin/iframe_media.html
  • templates/internals/admin/media.html
  • templates/internals/admin/page.html
【2014/11/3更新】

・Bootstrap関連のファイルを3.2.0 ⇒ 3.3.0にバージョンアップ
・アップロードする画像ファイルを選択した際に画像をプレビュー表示
・「freoのエントリーのタグ投稿を楽にする方法」によりエントリー登録のタグ投稿の際にエントリータグクラウド一覧（ページ登録ではページタグクラウド一覧）を表示
※導入する場合は各自で libs/freo/plugins/config.entry_tagcloud.php のdisplayファイルの読み込み設定に「,admin/entry_form」（libs/freo/plugins/config.page_tagcloud.php の場合は「,admin/page_form」）を追加してください（すでに導入済みの場合はそのままでOK）。

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

  • css/bootstrap.min.css
  • fonts/（丸ごとすべて）
  • js/admin.js
  • js/bootstrap.min.js
  • js/iframe.js
  • js/jquery.iPreview.min.js（追加）
  • js/jQuery.jTagging.js（追加）
  • templates/internals/admin/entry_form.html
  • templates/internals/admin/header.html
  • templates/internals/admin/iframe_header.html
  • templates/internals/admin/iframe_media_form.html
  • templates/internals/admin/media_form.html
  • templates/internals/admin/page_form.html
【2014/8/31更新】

テンプレートの修正が完了したのでダウンロードを再開しました。
・スマホ画面ではTinyMCEを使わないようBootstrapのクラスで調整していたのをphpでPC以外はTinyMCEを使わないように調整に変更
・一部バグ修正

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

  • templates/internals/admin/entry_form.html
  • templates/internals/admin/information_form.html
  • templates/internals/admin/media_form.html
  • templates/internals/admin/page_form.html
ファイルの構成（※はBootstrap3.3.0のファイル）
admin_bootstrap
 ┃
 ┣ css ┳ admin.css （カスタマイズ済）
 ┃     ┣ bootstrap.min.css※
 ┃     ┗ iframe.css （カスタマイズ済）
 ┣ fonts※（以下（略））
 ┣ js ┳ admin.js（カスタマイズ済）
 ┃    ┣ bootstrap.min.js※
 ┃    ┣ gAjax.js（freo公式の更新情報表示用、独自にカスタマイズ済）
 ┃    ┣ iframe.js （カスタマイズ済）
 ┃    ┣ jquery.iPreview.min.js （アップロードする画像ファイルのプレビューを表示するため）
 ┃    ┣ jQuery.jTagging.js （タグ投稿を楽にするため）
 ┃    ┗ jquery.metadata.js （jquery.tablesorter.jsをメディア管理以外で使用するため）
 ┣ libs ┳ freo ━ internals ━ admin ━ config.php（設定管理の表示用にカスタマイズ済）
 ┃      ┗ smarty ━ plugins ━ modifier.date_select.php（日時整形プラグイン）
 ┗ templates ┳ internals ━ admin（以下（略））
              ┗ plugins  ┳ export ━ admin.html（エクスポートプラグイン）
                          ┗ import ━ admin.html（インポートプラグイン）

※templates/internals/admin/には entry_category.html、entry_form_category.html、entry_preview.html、entry_preview_category.html、information_preview.html、page_preview.html は含まれていません。
エントリー、インフォメーション、ページのプレビュー表示を、訪問者向けの表示とほぼ同じにしていない場合は freoの公式サイトからダウンロード してお使いください。

markItUp!用追加ファイル（管理者用テンプレートに上書きしてください）
【2017/5/22更新⇒5/23再更新】

・ユーザー登録/編集画面が正しく表示できないバグを修正
・Google Feed APIが使用中止になったため、その部分の削除【5/23追加】

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

  • js/admin.js
  • templates/internals/admin/header.html【5/23追加】

※js/admin.jsの修正は、

//タブへのリンク
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
} 
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash;
})

を削除したのみです（削除しなくても特に動作に問題はありません）。

※templates/internals/admin/header.html の修正は、<head>～</head>内にある

<script src="https://www.google.com/jsapi"></script>

を削除したのみです（削除しなくても特に動作に問題はありません）。

【2015/2/26更新】

・タグクラウドを使わない状態でadmin.jsが機能しなかったのを修正
・Bootstrap関連のファイルを3.3.0 ⇒ 3.3.2にバージョンアップしたのに伴い、一部のグリフアイコンを変更

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

  • templates/internals/admin/header.html
【2014/11/3更新】

・アップロードする画像ファイルを選択した際にプレビュー画像を表示（参考）
・「freoのエントリーのタグ投稿を楽にする方法」によりエントリー登録のタグ投稿の際にエントリータグクラウド一覧（ページ登録ではページタグクラウド一覧）を表示

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。
※一旦「管理者用テンプレート」をバージョンアップしてから行ってください。

  • js/admin.js
  • templates/internals/admin/entry_form.html
  • templates/internals/admin/header.html
  • templates/internals/admin/media_form.html
  • templates/internals/admin/page_form.html
【2014/8/31更新】

テンプレートの修正しました。
・一部バグ修正

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

  • templates/internals/admin/entry_form.html
  • templates/internals/admin/page_form.html
ファイルの構成
admin_bootstrap_markitup
 ┃
 ┣ js ┳ admin.js（カスタマイズ済）
 ┃    ┗ iframe.js （カスタマイズ済）
 ┣ markitup ━ skins ━ simple ━ style.css（カスタマイズ済）
 ┗ templates ┳ internals ━ admin ┳ entry_form.html（エントリー登録/編集）
              ┃                    ┣ header.html（ヘッダ）
              ┃                    ┣ information_form.html（インフォメーション管理）
              ┃                    ┣ media_form.html（メディア登録/編集）
              ┃                    ┗ page_form.html（ページ登録/編集）
              ┗ plugins ━ clap ━ admin_thank_form.html（拍手送信プラグインの拍手お礼登録/編集）

 

TinyMCE4用追加ファイル（管理者用テンプレートに上書きしてください）
※TinyMCE4は添付していませんので こちら を参考に各自でダウンロードしてください。
【2017/5/22更新⇒5/23再更新】

・ユーザー登録/編集画面が正しく表示できないバグを修正
・Google Feed APIが使用中止になったため、その部分の削除【5/23追加】

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

  • js/admin.js
  • templates/internals/admin/header.html【5/23追加】

※js/admin.jsの修正は、

//タブへのリンク
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
} 
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash;
})

を削除したのみです（削除しなくても特に動作に問題はありません）。

※templates/internals/admin/header.html の修正は、<head>～</head>内にある

<script src="https://www.google.com/jsapi"></script>

を削除したのみです（削除しなくても特に動作に問題はありません）。

【2015/2/26更新】

・タグクラウドを使わない状態でadmin.jsが機能しなかったのを修正
・Bootstrap関連のファイルを3.3.0 ⇒ 3.3.2にバージョンアップしたのに伴い、一部のグリフアイコンを変更

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

  • templates/internals/admin/header.html
【2014/11/3更新】

・アップロードする画像ファイルを選択した際にプレビュー画像を表示（参考）
・「freoのエントリーのタグ投稿を楽にする方法」によりエントリー登録のタグ投稿の際にエントリータグクラウド一覧（ページ登録ではページタグクラウド一覧）を表示

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。
※一旦「管理者用テンプレート」をバージョンアップしてから行ってください。

  • js/admin.js
  • templates/internals/admin/header.html
ファイルの構成
admin_bootstrap_tinymce4
 ┃
 ┣ js ━ admin.js（カスタマイズ済）
 ┗ templates ━ internals ━ admin ━ header.html（ヘッダ）

 

TinyMCE4（CDN使用）用追加ファイル（管理者用テンプレートに上書きしてください）
【2017/5/22更新⇒5/23再更新】

・ユーザー登録/編集画面が正しく表示できないバグを修正
・Google Feed APIが使用中止になったため、その部分の削除【5/23追加】

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

  • js/admin.js
  • templates/internals/admin/header.html【5/23追加】

※js/admin.jsの修正は、

//タブへのリンク
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
} 
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash;
})

を削除したのみです（削除しなくても特に動作に問題はありません）。

※templates/internals/admin/header.html の修正は、<head>～</head>内にある

<script src="https://www.google.com/jsapi"></script>

を削除したのみです（削除しなくても特に動作に問題はありません）。

【2016/1/24更新】

・プラグインの翻訳ファイルを読み込めなかったのを修正
・翻訳ファイルを最新版に更新
・CDNファイルのURL表記のバグを修正

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

  • js/admin.js
  • js/tinymce/ja.js
  • templates/internals/admin/header.html
【2016/1/24更新】

・CDNファイルのURLを変更（これで恐らく常に最新のTinyMCE4が反映される模様）

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

  • templates/internals/admin/header.html
【2015/2/26更新】

・タグクラウドを使わない状態でadmin.jsが機能しなかったのを修正
・Bootstrap関連のファイルを3.3.0 ⇒ 3.3.2にバージョンアップしたのに伴い、一部のグリフアイコンを変更

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

  • templates/internals/admin/header.html
【2014/11/3更新】

・アップロードする画像ファイルを選択した際にプレビュー画像を表示（参考）
・「freoのエントリーのタグ投稿を楽にする方法」によりエントリー登録のタグ投稿の際にエントリータグクラウド一覧（ページ登録ではページタグクラウド一覧）を表示

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。
※一旦「管理者用テンプレート」をバージョンアップしてから行ってください。

  • js/admin.js
  • templates/internals/admin/header.html
ファイルの構成
admin_bootstrap_tinymce4cdn
 ┃
 ┣ js ┳ tinymce ━ ja.js（日本語変換ファイル）
 ┃    ┗ admin.js（カスタマイズ済）
 ┗ templates ━ internals ━ admin ━ header.html（ヘッダ）

 

【2014/8/31更新】

テンプレートの修正しました。
・スマホ画面ではTinyMCEを使わないようBootstrapのクラスで調整していたのをphpでPC以外はTinyMCEを使わないように調整に変更

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

  • templates/plugins/clap/admin_thank_form.html（拍手送信プラグインの拍手お礼登録/編集）
ファイルの構成
admin_bootstrap_plugin
 ┃
templates
 ┃
plugins
 ┃
 ┣ bookmark（ブックマーク登録プラグイン）
 ┣ catalog（ショッピングカートプラグイン）
 ┣ catalog_order（注文管理プラグイン）※cancel_complete.html（注文キャンセル送信完了ファイル）も同梱
 ┣ circle（サークル管理プラグイン）
 ┣ clap（拍手送信プラグイン）
 ┣ count（カウンタプラグイン）
 ┣ entry_tagmanager（エントリータグ管理プラグイン）
 ┣ filemanager（ファイル管理プラグイン）
 ┣ form（フォーム管理プラグイン）
 ┣ media_comic（ブックマーク登録プラグイン）
 ┣ menu（メニュー登録プラグイン）
 ┣ message（メッセージ登録プラグイン）
 ┣ page_pid_update（ページ親ID一括変更プラグイン）
 ┣ page_tagmanager（ページタグ管理プラグイン）
 ┣ paint（イラスト投稿プラグイン）
 ┣ parts（ブログパーツ管理プラグイン）
 ┣ popularity（人気コンテンツプラグイン）
 ┣ profile（プロフィール管理プラグイン）
 ┣ riddle（なぞなぞ認証プラグイン）
 ┗ task（タスク登録プラグイン）

※freo.jpで配布されているプラグインの管理画面のみ（必要なプラグインのテンプレートを追加してください）

実装した管理画面のカスタマイズ

ナビゲーションバー
メニューバー
各画面共通
ステータス

・エントリー登録ボタンを設置【2015/2/26追加】

設定管理
  • 設定管理の項目を折りたたみメニューで表示
  • 各種設定の表示を下ではなく右側に配置（スマホで使用の場合は下側に配置）
エントリーとページの管理
エントリーとページの登録/編集
コミュニティ
  • freoのコメント管理画面に投稿先とコメントを表示する ⇒ common.php を編集しない場合は投稿先はエントリーNo.またはページIDでの表示
  • トラックバック管理画面に投稿先を表示 ⇒ common.php を編集しない場合は投稿先はエントリーNo.またはページIDでの表示
  • コメントした者が登録ユーザーの場合はコメント管理の名前の欄にユーザーのアイコンを表示
ユーザー
システム
プラグイン

...など

補足【2014/8/16追記】

  • エントリー・ページによって利用するオプションを切り替える で templates/internals/admin/entry_form.html にコードを追加する場合は、96～98行目あたりの 
    <dl>
<!--{foreach from=$options|smarty:nodefaults item='option'}-->
  <dt>{$option.name}<!--{if $option.required == 'yes'}--> <span class="label label-danger" title="入力必須">*</span><!--{/if}--></dt>

    の部分を、

    <dl>
  <dt>使用するオプション</dt>
    <dd>
      <select name="entry[option_set]" class="form-control" id="article_option_set">
        <option value="">選択してください</option>
        <option value="diary_">日記</option>
        <option value="illust_">イラスト</option>
        <option value="novel_">小説</option>
      </select>
    </dd>
<!--{foreach from=$options|smarty:nodefaults item='option'}-->
  <dt id="article_option_{$option.id}" title="{$input.entry_associate.option[$option.id]}">{$option.name}<!--{if $option.required == 'yes'}--> <span class="label label-danger" title="入力必須">*</span><!--{/if}--></dt>

    に変更（赤字の部分を追加、元々の追加部分よりピンク字部分を追加）してください。

  • エントリー・ページによって利用するオプションを切り替える で templates/internals/admin/page_form.html にコードを追加する場合は、122～124行目あたりの 
    <dl>
<!--{foreach from=$options|smarty:nodefaults item='option'}-->
  <dt>{$option.name}<!--{if $option.required == 'yes'}--> <span class="label label-danger" title="入力必須">*</span><!--{/if}--></dt>

    の部分を、

    <dl>
  <dt>使用するオプション</dt>
    <dd>
      <select name="page[option_set]" class="form-control" id="article_option_set">
        <option value="">選択してください</option>
        <option value="diary_">日記</option>
        <option value="illust_">イラスト</option>
        <option value="novel_">小説</option>
      </select>
    </dd>
<!--{foreach from=$options|smarty:nodefaults item='option'}-->
  <dt id="article_option_{$option.id}" title="{$input.page_associate.option[$option.id]}">{$option.name}<!--{if $option.required == 'yes'}--> <span class="label label-danger" title="入力必須">*</span><!--{/if}--></dt>

    に変更（赤字の部分を追加、元々の追加部分よりピンク字部分を追加）してください。

  • エントリーの登録ユーザーを変更する方法 で templates/internals/admin/entry_form.html にコードを追加する場合は、88行目あたりの 
    <div class="col-md-4 panel-group" id="accordion">

    の下に、

    <!--{if $freo.user.authority == 'root'}-->
  <dl>
      <dt>登録ユーザー変更</dt>
          <dd>
              <select name="entry[user_id]" class="form-control">
              <!--{foreach from=$users|smarty:nodefaults item='user'}-->
                  <option value="{$user.id}"{if $user.id == $input.entry.user_id}  selected="selected"{/if}>{$user.id}</option>
              <!--{/foreach}-->
              </select>
          </dd>
      </dt>
  </dl>
<!--{/if}-->

    を追加（元々の追加部分より<h3>登録ユーザー</h3>を削除しピンク字部分を追加）してください。

  • freoの更新ping プラグイン（機能拡張版） を導入して templates/internals/admin/entry_form.html にコードを追加する場合は、88行目あたりの 
    <div class="col-md-4 panel-group" id="accordion">

    の下に、

       <dl>
    <dt>更新ping</dt>
      <dd>
        <select name="plugin_sendping[enable]" class="form-control">
          <option value="OFF" {if $plugin_sendping.enable == Off} selected="selected"{/if}>送信しない</option>
          <option value="On"   {if $plugin_sendping.enable == On}   selected="selected"{/if}>送信する</option>
        </select>
      </dd>
  </dl>

    を追加（元々の追加部分よりピンク字部分を追加）し、同じく441行目あたりの

    <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span>削除する</button>

    の下に、

       <dl>
    <dt>更新ping</dt>
      <dd>
        <select name="plugin_sendping[enable]" class="form-control">
          <option value="Off" {if $plugin_sendping.enable == Off} selected="selected"{/if}>送信しない</option>
          <option value="On"   {if $plugin_sendping.enable == On}   selected="selected"{/if}>送信する</option>
        </select>
      </dd>
  </dl>

    を追加（元々の追加部分よりピンク字部分を追加）してください。

ページ移動

関連エントリー

コメント

ジェネ

いつも便利な機能ありがとうございます！
今回もBootstrap3使わせて頂きました┏○ﾍﾟｺ

導入したのですが、こちらの
「freoのエントリーのタグ投稿を楽にする方法」
http://cccabinet.jpn.org/view/69
も便利で使わせて頂いておりましたが、今回ので元に戻っちゃいましたね・・・

どうすればよろしいでしょうか～？！

  • -------------------

あっ・・。
同じようにすれば候補の表示はできたのですが～
クリックしても入力はされないようで・・・。

  • URL
  • 2014/10/29 14:43:00

ジェネ

たびたびすいません！

画像登録で複数可とは書いてるのですが、できないのですが・・・･･･(；´Д｀)ｳｳｯ…

以前のでは1枚選択すると自動で下に選択欄が出てきたのですが、今回でません！
firefoxがダメなのかな？

  • URL
  • 2014/10/29 22:30:00

ccc

「freoのエントリーのタグ投稿を楽にする方法」はconfig.entry_tagcloud.phpを編集する必要があるので敢えて導入しませんでしたm(__)m
タグは元記事を参考にすれば導入できるはずです（個人的には導入しています）。

またHTML5では普通に画像の複数選択ができるのでfreoオリジナルの複数選択方法は導入していません。
firefoxなら画像はctrlキーを押しながら画像を選択すると複数選択ができます。

  • URL
  • 2014/10/29 22:46:00

ジェネ

そうですか～ありがとうございますぅ！

  • URL
  • 2014/10/30 09:46:00

ジェネ

タグ投稿のうpありがとうございますぅ！
さっそく実装してみました┏○ﾍﾟｺ

後、投稿記事中のエンターですが<p></p>になって・・・
シフト押しながらエンターで開業になるようですが(；´･ω･)

http://freo.jp/document/function/newline.html
の公式の記事を試したのですがうまくできませんでしたゥﾜｧ─(ﾟ｀Д´ﾟ)─ｧｧﾝ!!

  • URL
  • 2014/11/05 10:02:00

natsu

お世話になります。freo初心者ですが、こちらの最新テンプレート、大変見やすく便利に管理していけそうだと思い今から気合が入っております。
一点質問です。エントリー/ページ投稿画面の「メディア管理」「メディア登録」を押しても、きちんとインラインフレームで表示されず、正しく画像を挿入出来ません。ブラウザとの相性もあるかと思いfirefox,google clome各最新で試しましたが同様でした。
こちらのテンプレートを導入する前のデフォルトの状態では問題なくインラインで表示されます。
他に同様の報告はありませんでしょうか？お手数ですがご確認頂ければ幸いです。

  • 2015/02/07 11:16:00

ccc

お返事が遅くなって申し訳ありません。

お話の状況ですが、正常にインラインフレームで表示される場合とそうでない場合（admin.jsファイルが機能しない）と両方あるようでして、ファイルの違いでもなくブラウザの違いでもなく、理由がさっぱりわかりませんm(__)m

インラインフレームをやめてBootstrapのモーダル表示も検討してみましたが、修正が膨大すぎて手が掛かりそうだし...(^_^;)

もう少し調べては見ますが、時間がかかりそうです。

  • URL
  • 2015/02/22 16:20:00

mai

すごく使いやすい！！と思い実装してみました。
が、上記の方のおっしゃる通り、いくつか正常に機能しない点がありますね。

インラインフレームでの表示がやはり出来ません…。

現在日時のボタンも機能しません…最初に入力される時間は８時間遅れ。

以下個人的な意見…
PC以外はtinymceを使わない設定のようですが、それを使うようにする設定も教えてほしい…。

数少ないfreoの管理者用テンプレートでとても高機能・見やすいものなので、今後も期待しています！！

  • 2015/02/23 15:06:00

mai

自己解決です。
admin.js

//タグ入力
$("#tag").jTagging($("#taglist"), ",");

を削除したら、インラインフレームも日時入力も可能になりました。

タグ入力補助を使ってないときは消しましょうってことですかね？
上記natsuさんもそうなのかな？

  • 2015/02/23 15:29:00

ccc

maiさん、わざわざ調べてくださってありがとうございます。

どうもjQuery.jTagging.jsが邪魔してるっていうことに気づきませんでした(^_^;)
そもそもheader.htmlでタグクラウドを使わない場合はjQuery.jTagging.jsを読まないようにしてたので、これを常時読むようにすれば回避できます。

近々に手直ししたものをUPします。
ご迷惑をお掛けしまして申し訳ありませんでしたm(__)m

P.S.

PC以外はtinymceを使わない設定のようですが、それを使うようにする設定も教えてほしい…。

entry_form.htmlの場合
77行目の

<!--{if $freo.agent.type == 'pc'}-->

を削除し、さらに79行目から81行目の

<!--{else}-->
 <dd><textarea name="entry[text]" class="form-control" rows="10">{$input.entry.text}</textarea></dd>
<!--{/if}-->

を削除して下さい。
ただし、freoデフォルトのTinyMCE3だとレスポンシブに対応しておらず、モバイルだと画面から思いっきりはみ出るのでTinyMCE4をお使い下さい。
※この場合、freoの携帯・iPhone入力用の変換機能ファイルは削除する必要があると思います。
http://freo.jp/document/function/mobile_text.html

  • 2015/02/24 20:23:00

ari

いつも便利に使わせていただいています。
こちら上記のインラインフレーム、現在日時、メディア管理画面からの「挿入」は最新版を導入すれば解決していますか？
最新版を導入したのですが、メディア管理画面から画像を挿入してもプレビューが表示されるだけで
挿入出来ません（こちらで見るサンプルのようにインラインフレームにもなりません）
「freoのエントリーのタグ投稿を楽にする方法」を導入していますが、ためしに
admin.jsの該当箇所を削除しても改善されませんでした。
画像は毎回使うので出来れば使いたい機能なのですが、あとはどのあたりを確認すれば良いでしょうか
win7 firefoxです。
ちなみにIE11では上記にくわえ「HTMLを編集」で開くと何も書かれていませんでした。

  • 2015/06/05 14:21:00

ccc

少し返事が遅くなって申し訳ありません。

最新版導入後、インラインフレームが表示できない場合
1)ブラウザのキャッシュをクリアする
2)freoのtemplates_cディレクトリの中の.htaccess以外のファイルを削除する
は試されたでしょうか？

ちなみにIE11では上記にくわえ「HTMLを編集」で開くと何も書かれていませんでした。

そもそもTinyMCE3ではIE11でHTMLソースが表示されないというバグがあるようです。
freoのサポートで以前書いたものがあるので、それを参考にTinyMCE3の最新版（現在は3.5.11）を導入してみてください（導入したのに表示できない場合は、windowsのインターネットオプションでインターネット一時ファイル削除を行って下さい）。
http://freo.jp/support/view/1067

  • 2015/06/09 14:25:00

ari

ありがとうございます。
1),2)ともにやったつもりでしたが改めて今確認してみましたが
やはりインラインフレームになりませんでした。

IEの件理解しました。丁寧にありがとうございます。

  • 2015/06/09 18:09:00

ccc

>やはりインラインフレームになりませんでした。
でしたら、jsディレクトリにすべてのjsファイルはアップされていますでしょうか？
特に
gAjax.js
jquery.iPreview.min.js
jQuery.jTagging.js
jquery.metadata.js
とかは使わないからアップしていないとかってありませんか？
それか他にカスタマイズしたのに忘れているとか？

admin.jsにJavascriptのコードが記載されているのに、該当のjsファイルがアップされていないとインラインフレームが動作しないのでご確認下さい。
そういえば最新版の修正の理由もこれでした(^_^;)

  • URL
  • 2015/06/09 20:30:00

ジェネ

ariさんは無事解決なされたでしょうか？

私はテンプレートを新しくするために、データベースを共有して新しく設置しました。

TinyMCE色々と不具合が出て大変でした(´-∀-｀；)

まずは、共有する時は
http://freo.jp/support/view/830#article_833で
templates/internals/admin/header.htmlとcontent_css: freo_path + 'css/common.css',の直リンクに変更しました。

TinyMCEツールバー表示されたと思ったら、今度はariさんと同じようにメディア管理画面から画像を挿入してもプレビューが表示されるだけで挿入できなくなりました。

色々試してみると、今度はTinyMCE自体が表示されなくなり三日ほど色々検索したりと・・・もう大変ｗ

ふと古い方のfreoフォルダを眺めていると、markItUp！
って入ってないな・・・

そもそもmarkItUp!って何？！って感じなのですが、TinyMCEを使うかmarkItUp!を使うかなのかなと思い、新しいほうのmarkItUp!を削除と言うか抜きで試して見たところ無事動きました(；´･ω･)

一緒にいれちゃ駄目なのかな？

素人にはよくわかりませんが、正常な物を入れれば、ちゃんと動くようです・・・。

ariさんも頑張ってください！

  • URL
  • 2015/06/11 09:30:00

ari

何度も丁寧にありがとうございます
昨日は時間がとれなかったので今日いろいろ確認してみたのですが.js類は全て入っていました。markItUp！関連ファイルは無さそうでした。

>それか他にカスタマイズしたのに忘れているとか？

「freoにTinyMCE4を導入する」を導入した時に、admin/header.htmlを書き換えたらテキスト入力部分が真っ白になってしまったので
元に戻したまま js/admin.jsを書き換えて(2014/8/31 TinyMCE4用追加ファイルを入れてない状態)という
めちゃくちゃな状態になっていました(こちらでご相談する以前の問題でした。申し訳ありません)。
なので、他に何かいじった時に変更を忘れているような気がします。
admin_bootstrapを入れ直し、上記を直してもインラインフレームになってくれないので、時間をおいてひとつひとつ確認してみます

データベースは共有していないのですが上の階層に置いて直リンクも試してみましたが、
今度はtinymceの入力欄に画像が表示されない（ソース）状態になってしまったのであきらめました

管理画面自体は本当に便利で是非使わせていただきたいので、画像を挿入するときは右クリでアドレスコピペして
貼りつつ、日を置いてまた確認してみます
お時間を割いていただき、申し訳ありません。ありがとうございました
これからも、他カスタマイズ等お世話になります。

  • 2015/06/11 16:41:00

muro

どちらからご連絡したらよいかわからなかったため、記事にコメントという形で失礼します。
問題があれば当コメントを削除してください

以下のページをよく参考にさせて頂いていたのですが、

Bootstrap3移行ガイド
http://cccabinet.jpn.org/bootstrap3/

先日から、スタイルシートが適用されていないのか、レイアウトが崩れていたり、リンクを踏むと文字化けしてしまい大変見づらい状態となっております。
こちらに掲載されている情報はBootstrap3を学習する上でたいへん参考になっていたため、可能であれば修正していただけると幸いです。

よろしくお願いします。

  • Mail
  • 2015/08/27 09:19:00

ccc

muroさんご連絡ありがとうございます。
先日一部修正した際にどういうわけかページのヘッダ部分が空になっていたので、「Bootstrap3移行ガイドについて」のレイアウトが崩れた状態になっておりました。
修正しましたのでご確認お願いしますm(__)m

  • 2015/08/27 21:21:00

maki

申し訳ありません。
freoの最新版Ver1.19.3をサーバーにアップロードし、動作確認後にこちらの管理画面テンプレートを導入させて頂いたのですが、ページ登録画面のみ、フィルター機能部分が折りたたみは開くけれども項目が何も表示されない状態です。
エントリー登録画面では正常に表示されているのですが、原因が分からず、お手数ですがご助言頂けないでしょうか。よろしくお願いします。

  • 2016/01/21 10:58:00

ccc

makiさん遅くなってすみません。
freo.jpのサポート掲示板（http://freo.jp/support/view/1471）にも書いたのですが、どうも<!--{/if}-->の位置がズレていたようで、検証してからアップしようと思ってたのですが、ココのところの寒さでPCに向かっていなかったのでまだ修正できていませんでした。
とりあえず修正したものをアップしてみたのでお試しいただけませんでしょうか。

  • URL
  • 2016/01/24 20:16:00

yama2211

管理画面のテンプレートを導入させてもらったんですが、なんかおかしいです。(スクショ: ttps://gyazo.com/09943ebbf38588e55b0228206c5e1276 )
何度が入れなおしをしてみたんですが、何度やってもこうなってしまいます。
どうすればよいでしょうか...

スクショでは、サイト名とユーザー名を伏せてます。

  • 2016/05/28 15:20:00

ccc

yama2211さんすみませんm(__)m
スクリーンショットだけでは判断できかねますが、お使いのサーバーで自動的に広告が入るとかだとCSSが狂ってしまうことがありますが、そのようなことはありませんか?

ないようでしたら他に原因が思いつきません。申し訳ありませんm(__)m

  • URL
  • 2016/06/09 20:45:00

yama2211

cccさん

さっき入れてみたら、ちゃんと表示されました!!
お騒がせしました...

  • 2016/06/19 10:48:00

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム

基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がありますので、その旨ご了承下さい。

ユーティリティ

2023年03月

日 月 火 水 木 金 土
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -

カテゴリー

タグクラウド

キーワード検索

キーワード検索フォーム

ページ

リンク

ユーザー

  • cccのアバター

新着画像

  • freoのメディア登録・メディア管理のTinyMCE5プラグイン
  • カレンダーの祝日定義の変更・延長
  • freoにTinyMCE5を導入する
  • freo用markItUp!拡張版の配布
  • freoのエントリーのタグ投稿を楽にする方法

新着/更新エントリー

freoをあれこれカスタマイズ版の配布
2022/01/10 19:40
ショッピングカートプラグインの商品配送方法・料金などの変更
2021/11/14 12:06
freoのメディア登録・メディア管理のTinyMCE5プラグイン
2021/09/25 21:53
カレンダーの祝日定義の変更・延長
2021/09/23 14:39
freoにTinyMCE5を導入する
2020/08/08 13:39

新着コメント

Re:freoをあれこれカスタマイズ版の配布
2022/09/08 from そら
Re:freoをあれこれカスタマイズ版の配布
2022/09/05 from ccc
Re:freoをあれこれカスタマイズ版の配布
2022/09/04 from そら
Re:freoをあれこれカスタマイズ版の配布
2022/08/08 from きしもと
Re:freoをあれこれカスタマイズ版の配布
2022/08/07 from ccc

過去ログ

2022年
2021年
2020年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年

人気コンテンツ

ブログパーツ

Twitter

Twilogを見る

Feed