WordPressで読書ノート(改訂版)

2016年4月30日Web-log・ココログ関連,WordPress,書籍・雑誌

旧ウェブサイトからコンテンツを引っ越す時に、それまで付けていた読書記を効率良くまとめられないか? と考えた結果、WordPressのCustom Field Template (カスタムフィールドテンプレート)と言うプラグインを使って実現する方法を考えました。

結構、これは上手く行って、簡単な入力で定型フォーマットでカード型の読書記を作る事ができ、カテゴリーを正しく設定する事で、読書ノートの様に扱う事ができる様になりました。

まあまあ満足していたのですが、カスタムフィールドテンプレートや、そのデータ格納方式を調べる内にデータを作り直したくなりました。

カスタムフィールドテンプレートの使い方に関しては、次のページがわかりやすいです。ありがとうございます。

データベース(WordPressのデータベースのテーブル)の書き換えは、次のページにまとめました。

せっかく作り直すのだから、ある程度きちんとした形式にしたいと言う事で、次のページを参考にさせていただきました。

カスタムフィールドテンプレートを使った基本的なやり方は、最初の方法と同じです。

今回は、登録内容と表示方法を変更しました。

テンプレートで指定する内容は、次の通りです。

[cft_rn_title]
label = 書名
type = text
size = 50

[cft_rn_author]
label = 著者
type = text
size = 35

[cft_rn_date_publication]
label = 出版年
type = text
size = 25
date=true
startDate = '1900/01/01'

[cft_rn_publisher]
label = 出版社
type = text
size = 35

[cft_rn_price]
label = 価格
type = text
size = 35

[cft_rn_location]
label = 本の所在
type = checkbox
value = 蔵書 # Kindle # 処分済み # 図書館 # 友人 # その他

[cft_rn_stars]
label = 評価
type = select
value = ☆☆☆☆☆ # ★☆☆☆☆ # ★★☆☆☆ # ★★★☆☆ # ★★★★☆ # ★★★★★

[cft_rn_date_start]
label = 読み始めた日
type = text
size = 25
date=true
dateFirstDayOfWeek = 0
dateFormat = yyyy年mm月dd日
startDate = '1900/01/01'

[cft_rn_date_finish]
label = 読み終えた日
type = text
size = 25
date=true
dateFirstDayOfWeek = 0
dateFormat = yyyy年mm月dd日
startDate = '1900/01/01'

[cft_rn_impression_words]
label = 心に残った言葉
type = textarea
rows = 10
cols = 150
tinyMCE = true
htmlEditor = true

[cft_rn_book_report]
label = 感想
type = textarea
rows = 10
cols = 150
tinyMCE = true
htmlEditor = true

グローバル設定は、次の様にしました。

グローバル設定

そして、表示の形式を決める[cft] and [cftsearch] Shortcode Formatについては、FORMAT #1に次の様に記載しています。

<table border="1">
<tr>
  <th>書名</th>
  <td colspan="5" class="cft-title">[cft_rn_title]</td>
</tr>
<tr>
  <th>著者</th>
  <td>[cft_rn_author]</td>
  <th>出版社</th>
  <td>[cft_rn_publisher]</td>
  <th>出版年</th>
  <td>[cft_rn_date_publication]</td>
</tr>
<tr>
  <th>価格</th>
  <td>[cft_rn_price]</td>
  <th>読書期間</th>
  <td colspan="3">[cft_rn_date_start]〜[cft_rn_date_finish]</td>
</tr>
<tr>
  <th>本の所在</th>
  <td colspan="3" class="cft-checkbox">[cft_rn_location]</td>
  <th>評価</th>
  <td class="cft-stars">[cft_rn_stars]</td>
</tr>
<tr>
  <th>心に残った言葉</th>
  <td colspan="5">[cft_rn_impression_words]</td>
</tr>
<tr>
  <th>感想</th>
  <td colspan="5">[cft_rn_book_report]</td>
</tr>
</table>

“type = checkbox"を指定した場合、デフォルトでは"<ul>"のリスト形式となる様です。このままでは、縦に並んでしまうので、横並びになる様にしました。他、タイトルなどの体裁を含め、テーマのスタイルシートに記入しておきます。

.cft-title {
        font-weight: bold;
        text-shadow: 3px 3px 6px #ff7200;
        }

.cft-stars {
        color: #ffaf03;
        }

.cft-checkbox li {
        float: left;
        list-style: none;
        margin: 5px;
        }

.cft-checkbox :after {
        content: ".";
        display: block;
        clear: both;
        height:0;
        visibility:
        hidden;
        }

スタイルシートを書く際、次のページを参考にさせていただきました。ありがとうございます。

これらの設定をした上で、新規に投稿します。

カスタムフィールドテンプレートの読み込みで、「読書カード」を読み込み、データを入力します。

データ入力

本文部分には、次のショートコードを記載するだけです。

[cft format=1]

“format=1″で、上記の"FORMAT #1″を選択しています。

その結果、次の様に表示されれば、成功です。

読書ノート(読書カード)

その記事に「読書ノート」と言う「カテゴリー」にすれば、そのカテゴリーを表示する事で、読書ノートとなります。

読書ノート

Posted by お市のかた