Loading

看板娘

専用ページを制作するまでの退避場所

別にfreoに限った話じゃないですけどね。TinyMCE4を実装しているところならなんでもいい話なんですけどね。

当サイトもTinyMCE3.xからTinyMCE4.xに切り替えたんですけど、これCDN対応してたんですね。なので嬉々としてCDNで導入したのですが……

『テーマの変更方法がわからん!』

いや、うん、普通に導入した場合は

theme: "modern",
skin: "hoge",

でいいんですよ。ええ、ちゃんとskinsフォルダに格納していればこれで読み込まれますので。でもCDNの場合は当たり前ですが向こうのディレクトリを見に行ってしまうので見つかるわけないんですよ。404エラー

なのでCDNでの導入時は下記のように自分のサイトの方を参照させないとダメっぽいです。

theme: "modern",
skin_url: "http://host.domain/hoge",

絶対パスで書いてますけど、たぶん相対パスでも参照できると思います。確認はしていませんが。

実はこれ、偶然見つけただけなんですよね。だって検索してもそれっぽいこと書いてあるところなかったんですもの。

というか探し方が悪いのかテーマ配布しているサイトさん少なく無いですか? まぁなければ作るだけなのでいいんですけど……

freo1.10来ましたね。

それはそうと、freoってなんだかインフォメーション機能使いづらくありません?

特定のページでしか使用できませんし。

一応有志で任意のページに表示させるプラグインを作ってくださっている方がいますが、あれだとhtmlタグが機能しませんし(´・ω・`)

ちなみに既存のインフォメーション機能がhtmlタグ機能するのかは覚えてません(オイ

というわけで任意のページにhtmlタグ機能したまま擬似インフォメーションを表示させる方法でも書いておきます。

(基本的にはphpでいうinclude。やってることはjQueryの.load機能で他のhtmlを読み込ませているだけ)

下準備

インフォメーション等で使用したい内容を記述したページを作成。

ページID等は好きなように。

ここでは仮にexample_idとします。

その際に取得する際の位置情報になりますので、表示する範囲を<div id="hoge"></div>で必ず囲んでください。(複数可能)

ローカルファイルでの作業

管理メニューへ編集ページヘのリンクを作成

templates/internals/admin/header.html内の<h2>管理メニュー</h2>以下の任意の箇所に下記を追記。

<h3>インフォメーション</h3>
<ul>
	<li><a href="{$freo.core.http_file}/admin/page_form?id=example_id">エグザンプルID</a></li>
</ul>
擬似インフォメーション内容の表示

templates/内のheader.htmlまたはutility.html等の表示させたい箇所に以下を追記。

<div id="hoge"><p>Now Loading...</p></div>
<script type="text/javascript">
	$('div#hoge').load('/example_id #example_hoge');
</script>

これでページの内容だけが任意の箇所に表示されます。

簡単な説明ですが、1行目で読み込んだものを配置する場所を作成。2~4行目でhttp://host.jp/example_id内のid="example_hoge"を1行目で作成したid="hoge"に読み込み。これは別にexample.htmlなどのファイルでも平気です。

ともあれここまで書いてあれですが、自分はやはり0から作れないくせに1を1.1にする事が多いなぁとつくづく残念にorz

※追記

検索などでページが表示されてほしくない場合は、css3の下記をcssに適応させればいいかと思います。

※テンプレートによって多少変化しますが大筋はこんな感じです。(liなどでlist-style-typeを指定した場合は……ちょっと対処法探しておきます)

.page_child a[href*="example_id"] {display:none;}

 ※更に追記

たとえば『読み込み元のページでJavaScriptを動作させているが、読み込んだページの部分だけJavaScriptが動作しない』という自体が発生することが有りますが、これは.loadが画面の読み込みが終わった時に発生するので必然的にJavaScriptの実行はそれ以前になるため実行後の読み込んだページには機能しないことが原因です。

対処としては読み込んだページでも実行したい処理を以下のように書き換えて.loadと同じく画面の読み込みが終わったあとに処理するようにすればいいのです。(なので処理を記述する場所は.loadよりも下にする必要があります)

$(function() {処理内容});

$(window).load(function() {処理内容});

Notes

2014/05/03
更に追記
2012/10/16
記述内容整理
2012/10/04
加筆・修正(一部の処理を変更)
2012/10/03
加筆
2012/10/01
エントリー

freoのページ送りナビゲーションって初期だと前のページと次のページのみなんですよね。

なので自分のところで使っているのを公開しようかと思います。

ちなみに自分の他にも数名の方々が同様にページ送りナビゲーションのテンプレート等を公開しているのでそちらも探してみるといいかもしれませんよ。

表示形式

このブログと同じ形式です。

ダウンロード

DL:page_navi_1.1.2.zip

設置方法

1.page_navi.htmlをheader.html等がある箇所にアップロードする。

2.各htmlのページ送りナビゲーションがある部分を{include file='page_navi.html'}に置き換える。

CSSの一例

/*IEは未対応です*/
.page_number {
	padding: 5px 10px;
	margin: 0;
	text-align: center;
	display: -webkit-box;
	display: -moz-box;
	display: box;
}

.page_number li {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
}

謝辞

freoの作者さん(ないとさん)

素敵なプラグラムを作っていただきありがとうございます。この場を借りて改めて感謝します。

Notes

2014/01/04
ver.1.1.2 カテゴリーページで正常に送れない現象を修正
2013/06/18
ver.1.1.1 管理者権限時に管理画面以外でも管理用ページ送りが機能してしまう現象を修正
2013/01/23
ver.1.1.0 管理画面でも動作するように調整
2013/01/02
ver.1.0.0 webで掲載していたものをテンプレートとして使いやすいように修正して配布形式に変更

よくtwitterを定点観測しているんですが(主にTLとfreoとCSP)検索結果の順番がどうのというツイートがfreoのほうであったので確認してみたんです。すると初期だと日付に対して昇順降順を設定する項目が管理ページの設定項目にあるんですね。

ただこれだと対象をタイトルなどにしたり、実際に検索するユーザーが昇順降順を設定することはできないんですよ。

なので試験的に自分の検索プラグイン改でユーザー単位で昇順降順設定できるようにはしてみたのですが、中身の動作自体を既存のものと入れ替えてしまったせいで設定項目の方の初期順番が機能しないことに……

回避方法はあると思うのですが、自分の知識が正直いってまじめにプログラムを勉強していなかったためにいまいち回避できずといった状況に……

フォームで並びの指定データを飛ばしているので$freo->config['plugin']['search']['order']にそのデータを入れることができれば一応回避可能なのですが、うまく入らず……(というか絶対記述方法が自分間違っている)

ちなみに$freo->config['plugin']['search']['order']は初期ファイルで記述されている並び順を判定するデータ……だと思う。

やはりまじめに勉強するべきか……いやしかし3DCG始めた今となってはそんな時間殆ど無いし……

具体的には現在はどうやっているのか

一応下記のようにしてやっているだけ。(要検索プラグイン改? 本家検索プラグイン未検証)

search_descとかdatetime_descのままでもいいけど、一応既存のと差別化させておかないと自分が混乱するので変更しています。

page.search.php
//表示順設定
if ($freo->config['plugin']['search']['order'] == 'datetime_desc') {
	$order = ' ORDER BY datetime DESC';
} else {
	$order = ' ORDER BY datetime';
}

if ($_GET['search_order'] == 'search_desc') {
	$order = ' ORDER BY datetime DESC';
} else {
	$order = ' ORDER BY datetime';
}

に書き換え

検索プラグイン改で使用しているform内
<li><select name="search_order" style="height: 23px;">
	<option value="search_desc">降順</option>
	<option value="search_asc"{if $smarty.get.search_order == 'search_asc'} selected="selected"{/if}>昇順</option>
</select></li>

を追記

【もしかして13/08/22】

うまく動作していない可能性が出てきました。現在調査中です(´・ω・`)(もともとなんでこれでできるのか理解できていなかったんですけどね。明らかにこれじゃできないとは思っていましたし

はじめに

まず、当記事で想定しているspanが勝手に挿入される状況というのは、TinyMCEでCSSを読み込ませている場合、特定条件下でリスト化(メニューのボタン)した際に<span style="hoge">foo</span>というspanタグが挿入されることを指します。

この方法はやや強引なやり方かもしれませんし、もっといい方法があるかもしれません(そもそもCSSにコードが影響されないような設定があるのかもしれません。というかあって欲しい)

そしてこの現象がバグなのか仕様なのかはわかりません。

CSSの読み込ませ方法

.js内の設定記述にcontent_css : "main.css"

content.css内に@import "main.css"

どちらの読み込ませても発生。

CSSの内容

p {hoge} or body {hoge}

CSSにp{ line-height: 2;}がある場合、<p>いい天気</p>を<ul><li>いい天気</li></ul>に変換しようとすると、<ul><li><span style="line-height: 2;">いい天気</span></li></ul>になる。

回避方法

TinyMCEの設定記述に下記を追記。

extended_valid_elements : "span[!class]",

これを追記することにより、<span class="hogehoge">以外のspanタグは削除される。

弊害

メニューから文字の色を変更しようとすると<span style="color: #333333">のようにstyleで挿入されるため、上記の記述により削除される。

色を変更したい場合はclassを振る必要がある。ということはあらかじめ必要な色はCSSに登録しておくことが必要となる。

他にもstyleで指定するものは下記のように各所classを振る必要が発生する。

CSS内
.font_blue {color: #3366ff;}
.font_red {color: #ff0000;}
TinyMCE設定記述
theme_advanced_buttons1: 'styleselect',
style_formats : [ {title : '文字_青', inline : 'span', classes : 'font_blue'}, {title : '文字_赤', inline : 'span', classes : 'font_red'}, ],

archive


×

ログイン