freoカスタマイズ集

PHP Laboの テキスト整形プラグイン を脚注専用に改造したものです。

脚注の使用例

※テキスト整形プラグインのreadmeより抜粋。

概要

文章を (( と )) で囲うと、脚注に変換します。脚注部分は文章の最後に一覧表示されます。
脚注ではなく普通の2重カッコを使用したい場合、)(( と ))( で囲います。

記述例

脚注((書物などの本文の下につけた注釈。))はこのように表示されます。

結果（HTMLコード）

<p>脚注<a href="#id_note1" name="id_text1" id="id_text1" title="書物などの本文の下につけた注釈。">*1</a>はこのように表示されます。</p>
...

～（本文の最後、または「続きを読む」の手前）～
<p><a href="#id_text1" name="id_note1" id="id_note1">*1</a> : 書物などの本文の下につけた注釈。</p>

結果（実際の表記）

脚注*1はこのように表示されます。

※実際の注釈文はこのページの一番最後にあります。

ダウンロード

• こちら からプラグインをダウンロードできます。
• ファイル構成

  footnote
   ┣ libs ━ smarty ━ plugins ━ modifier.footnote.php
   ┃（Smartyプラグイン本体）
   ┣ markitup ━ sets ━ default ━ images ━ footnote.png
   ┃（markItUp用ボタン画像）
   ┣ tiny_mce ━ plugins ━ footnote ┳ img ━ footnote.png
   ┃（TinyMCE3用プラグイン）         ┣ langs ━  ～（略）～
   ┃　    　　                       ┣ editor_plugin.js
   ┃　    　                       　┗ editor_plugin_src.js
   ┗ tinymce ━ plugins ━ footnote ┳ img ━ footnote.png
  　  （TinyMCE4用プラグイン）       ┣ langs ━  ～（略）～
  　　      　　                     ┣ plugin.js
  　　      　                     　┗ plugin.min.js

プラグイン導入の方法

1. ダウンロードしたファイルを解凍して、footnote/ フォルダを開いて libs/ フォルダをfreoの libs/ ディレクトリにアップします。
2. 標準のTinyMCEを使用している場合は tiny_mce/、TinyMCE4を使用している場合は tinymce/、markItUpを使用している場合は markitup/ を、フォルダごとそれぞれ所定のディレクトリにアップします。
   TinyMCE4をCDNで使用している場合は、 tinymce/ を js/ 内にアップします。
3. テンプレートにある任意の変数に footnote という修飾子を追加します。
   例えば、エントリーに導入する場合は、templates/internals/default/default.html の109行目あたりにある
   

   {$entry_texts[$entry.id].excerpt|smarty:nodefaults}

   の部分を、

   {$entry_texts[$entry.id].excerpt|smarty:nodefaults|footnote:$entry.id}

   に変更（赤字を追加）します。
   ※修飾子にパラメータを設定し、「エントリーID」をエントリー一覧の各エントリー内のリンクに使用します。
   
   templates/internals/view/default.html の34行目と templates/mobiles/internals/view/default.html の37行目（管理画面でエントリーのプレビューの表示を導入している場合は、templates/internals/admin/entry_form.html の34行目も）あたりにある

   {$entry_text.excerpt|smarty:nodefaults}

   の部分を、

   {$entry_text.excerpt|smarty:nodefaults|footnote}

   に変更（赤字を追加）し、
   templates/internals/view/default.html の39行目と templates/mobiles/internals/view/default.html の42行目（管理画面でエントリーのプレビューの表示を導入している場合は、templates/internals/admin/entry_form.html の38行目も）あたりにある

   {$entry_text.more|smarty:nodefaults}

   の部分を、

   {$entry_text.more|smarty:nodefaults|footnote}

   に変更（赤字を追加）します。

プラグインの使用方法

標準のTinyMCEを使用している場合

js/admin.js の「//TinyMCE」以降のうち赤字部分を追加します。

//TinyMCE
tinyMCE.init({
～（略）～
  plugins: 'advimage,advlink,autosave,contextmenu,fullscreen,inlinepopups,pagebreak,searchreplace,table,visualblocks,footnote',
～（略）～
  theme_advanced_buttons2: 'forecolor,backcolor,removeformat,|,link,unlink,image,charmap,pagebreak,footnote,|,search,replace,|,undo,redo',
～（略）～

そうすると、

だった部分が、

となります。

注釈を入れたい場所で脚注ボタンを押すと、入力欄に (()) が挿入され、カーソルは (( と )) の間に入ります。

(( と )) の間に注釈の文章を入力します。

または、先に注釈文を入力して、その文章を選択してから脚注ボタンを押せば、(( と )) の間に注釈の文章が入ります。

（ボタンを押すと）

※この場合は、カーソルは )) の後に入ります。

TinyMCE4を使用している場合

TinyMCE4をサーバにアップして使用している場合

js/admin.js の「//TinyMCE4」以降のうち赤字部分を追加します。

//TinyMCE4
tinymce.init({
～（略）～
  plugins: "advlist image link autosave contextmenu fullscreen pagebreak searchreplace table lists charmap code media textcolor footnote",
～（略）～
  toolbar2: "forecolor backcolor removeformat | link unlink image media charmap pagebreak footnote | searchreplace |  undo redo |",
～（略）～

TinyMCE4をサーバにアップせずCDNで使用している場合

js/admin.js の「//TinyMCE4」以降のうち赤字部分を追加します。

//TinyMCE4
tinymce.init({
～（略）～
  plugins: "advlist image link autosave contextmenu fullscreen pagebreak searchreplace table lists charmap code media textcolor",
  external_plugins: {
    "footnote": freo_path + "js/tinymce/plugins/footnote/plugin.min.js",
  },
～（略）～
  toolbar2: "forecolor backcolor removeformat | link unlink image media charmap pagebreak footnote | searchreplace | ruby undo redo |",
～（略）～

そうすると、

だった部分が、

となります。

タグの入力方法は、標準のTinyMCEのときと同じです。

markItUpを使用している場合

markitup/sets/default/set.js の31～32行目あたりにある

    {name:'Page Break', className:'pagebreak', placeHolder:'<!-- pagebreak -->' },
    {separator:'---------------' },

の部分を、

    {name:'Page Break', className:'pagebreak', placeHolder:'<!-- pagebreak -->' },
    {name:'脚注', className:'footnote', key:'F', openWith:'((', closeWith:'))' },
    {separator:'---------------' },

に変更（赤字を追加）し、
markitup/sets/default/style.css の56～58行目あたりにある

.markItUp .pagebreak a {
  background-image:url(images/pagebreak.png);
}

の下に、

markItUp .footnote a {
  background-image:url(images/footnote.png);
}

を追加します。

そうすると、

だった部分が、

となります。

注釈を入れたい場所で脚注ボタンを押すか Ctrl＋F を押すと、入力欄に (()) が挿入され、カーソルは (( と )) の間に入ります。

(( と )) の間に注釈の文章を入力します。

または、先に注釈文を入力して、その文章を選択してから脚注ボタンを押すか Ctrl＋F を押せば、(( と )) の間に注釈の文章が入ります。

（ボタンを押すと）

※この場合は、カーソルは )) の後に入ります。

*1 : 書物などの本文の下につけた注釈。