ユーティリティ

2017年10月

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のアバター

新着画像

過去ログ

Twitter

Twilogを見る

Feed

エントリー

freo用Smarty脚注プラグイン

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
     ┣ libssmartypluginsmodifier.footnote.php
     ┃(Smartyプラグイン本体)
     ┣ markitupsetsdefaultimagesfootnote.png
     ┃(markItUp用ボタン画像)
     ┣ tiny_mcepluginsfootnoteimgfootnote.png
     ┃(TinyMCE3用プラグイン) ┣ langs ━ ~(略)~
     ┃     ┣ editor_plugin.js
     ┃     ┗ editor_plugin_src.js
     ┗ tinymcepluginsfootnoteimgfootnote.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',
~(略)~

そうすると、
97-1.jpg

だった部分が、
97-2.jpg
となります。

注釈を入れたい場所で脚注ボタンを押すと、入力欄に (()) が挿入され、カーソルは (()) の間に入ります。
97-3.jpg
(()) の間に注釈の文章を入力します。
97-4.jpg
または、先に注釈文を入力して、その文章を選択してから脚注ボタンを押せば、(()) の間に注釈の文章が入ります。
97-5.jpg
(ボタンを押すと)
97-6.jpg
※この場合は、カーソルは )) の後に入ります。

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 |",
~(略)~

そうすると、
97-7.jpg

だった部分が、
97-8.jpg
となります。

タグの入力方法は、標準の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);
}

を追加します。

そうすると、
97-9.jpg

だった部分が、
97-10.jpg
となります。

注釈を入れたい場所で脚注ボタンを押すか Ctrl+F を押すと、入力欄に (()) が挿入され、カーソルは (()) の間に入ります。
97-11.jpg
(()) の間に注釈の文章を入力します。
97-12.jpg
または、先に注釈文を入力して、その文章を選択してから脚注ボタンを押すか Ctrl+F を押せば、(()) の間に注釈の文章が入ります。
97-13.jpg
(ボタンを押すと)
97-14.jpg
※この場合は、カーソルは )) の後に入ります。

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

ページ移動

関連エントリー

コメント

ぼら

はじめまして。こんばんは。
freoのカスタマイズにこちらのwikiにお世話になっております。

Smarty脚注プラグインをエントリーではなくページのほうに適用しようと思っているのですが、

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

にあたる部分が現在使っているテンプレート(けになたてかさんで配布されているもの)になくて困っています。
どうしたらよろしいのでしょうか。よろしくお願いいたします。

  • 2017/10/11 22:25:30

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをひらがな3文字で入力してください(スパム対策)