QR Code Business Card

ユーザーがバンバン更新できる超簡単CMS!タグ不要のWord感覚で入力

ユーザーが情報を更新できる超簡単CMS!タグ無用のWord感覚で入力!
 ユーザーがニュースを自分で更新したりするための、超簡単なCMSを作ってみました。仕組みはPHPを知っていれば、誰でも作れるようなもので、単純にテキストファイルを更新して、それを読み込んで表示するだけの簡単なものです。WYSIWYGエディタを使って、タグを知らなくてもWord感覚でテキストを入力可能です!


概要


 タグを知らないユーザーでも、Word感覚で自社ニュースなどを更新できるように、簡単に作ったものです。実は「CMS」なんて言うほどそんな高度なものじゃないです。でも、大層なCMS入れなくても、たったこれだけで十分な場合も多いですし、アイデア次第ではいろいろできます。思った以上に役に立ちます。


 ユーザーは専用の入力フォームから、テキストファイルを更新します。webサイトを表示する際にそのテキストファイルを読み込んで表示する仕組みです。

 入力フォームは、パスワードが設定できるように別のフォルダに分けています。パスワードはなんでもいいのですが、例ではbasic認証にしています。

 また、入力する情報が多くても、表示がスクロールできるように、index.htmlがtopics.phpをobjectタグで読みこむようにしています。



ディレクトリ構造


easy_cms
 ├─ index.html 表示ファイル
 ├─ topics.php index.phpにiframeかobjectタグで読み込ませる
 ├─ topics_data.php[606] データファイル
 │
 ├─ js
 │  ├─ nicEdit.js WYSIWYGエディタ
 │  └─ nicEditorIcons.gif WYSIWYGエディタ用アイコン画像
 │
 └─ admin
    ├─ input.php[705] 入力フォーム
    ├─ .htaccess パスワード用(basic認証)
    └─ .htpasswd パスワード用(basic認証)

[ ]パーミッション




ダウンロード


easy_cms.zip(22KB)



実行結果


※入力フォームの表示例(admin/input.php)
入力フォーム

 入力フォームはこのように、WYSIWYGエディタを使って入力します。WYSIWYGエディタとは、テキストフォームの入力欄で、タグの知識がなくても、Word感覚でテキストの大きさや色を変更したりできる便利なエディタです。テキストを装飾すると、自動的にタグ付けされます。(インラインでスタイルシートが自動的に書き込まれる感じです)

 今回使用しているWYSIWYGエディタは、商用利用もできるMITライセンスの NicEdit の日本語化されたものを使用しています。

NicEdit
NicEdit 日本語版

【ポイント】
 このファイルでは、そのページの全てのテキストフォームに、NicEditが適用されるように設定しています。テキストフォーム毎に選択して適用することもできますので、NicEditを使いたいフォームとタグを打ちたいフォームを分けることもできます。
 詳しい使い方は、NicEdit 日本語版をダウンロードすると、デモファイルが入っていますので、そちらを参照して下さい。

 例では特にセキュリティは考えておりませんので、必要に応じてhtmlspecialcharsなどを使って、入力値の制限を行って下さい。


 テキストをお好みで装飾して、「書き込み」をクリックすると、「topics_data.php」に保存されます。



※データの出力例(index.html)
データの表示

 このように、ユーザーが入力した情報が表示されました。少し文字の大きさが入力フォームと違いますが、適宜スタイルシートで調整して下さい。

 簡単に設置できますので、サイト内で予めユーザーが変更したい箇所を打合せておいて、何箇所かこのCMSを仕込んでおけば、ユーザーにとってかなり使いやすくなります。


 ユーザーがWordPressを使いこなせなかったり、そもそもWordPressを入れるほどでもない場合に役に立ちます。タグの苦手な方が更新する場合でも使えるのが強みです。



ソース


admin/input.php




index.html




topics.php

SNSでもご購読できます。

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)