スポンサーリンク

カスタム投稿を活用して自分専用のメモ機能を実装してみた 

preview カスタマイズ集
この記事は約14分で読めます。
記事内に広告が含まれています。
スポンサーリンク

プライベートメモ(Private Notes Manager) は、WordPressのカスタム投稿を使い「自分だけが見られるメモ」を追加できるプラグインです。

これまでブログを運営する中で、やりたいことやアイデアなどを投稿の下書きとして書き留めてきました。
しかし、実際の記事とは関係のないカスタマイズのメモや「いつかやってみたいこと」なども下書きに保存していたため、下書きばかりが増えてしまった…という経験があります。

それを解決するために、投稿とは切り離してメモを管理でき、記事の整理にも役立つよう作成してみました。
管理画面に表示されるメモは自分専用の備忘録として活用でき、他のユーザーや訪問者には一切表示されません。
「公開するほどではないけれど、記録しておきたいこと」などアイディア次第でいろいろな用途に使用できるかもしれません。

興味のある方は、プラグインとして配布していますので、ぜひご自由にお試しください。

投稿がない場合、ダッシュボードの期限メモ通知にエラーが表示される場合がある不具合を修正しました。
バージョンは Ver1.0.2となっています。

メールでのカテゴリー別通知でメールが同じものが2通送信される不具合を修正しました。
バージョンは Ver1.0.1となっています。

スポンサーリンク

【プライベートメモ】とは

【プライベートメモ】は、WordPress 管理画面上で個人用のメモを管理し、期限切れや期限が近いメモを自動的に通知できるものです。既存の投稿やカスタム投稿タイプとは独立してシンプルに使えるため、日々のちょっとした備忘録からタスク管理まで活用できると思ます。

主な特徴

  • 投稿タイプ「プライベートメモ」にカテゴリ・タグを設定
  • 投稿記事に期限日を設定可能(カレンダー入力対応)
  • 完了/未完了のステータス管理
  • 通知メールを自動送信(期限切れ、当日、明日、数日前など柔軟設定)
  • 通知はメール、ダッシュボード、管理画面に表示
  • Gutenberg・クラシックエディター両対応
  • 今すぐ通知送信ボタンあり(テスト送信にも便利)
  • 通知メールの件名・本文・フッターをテンプレート化、自由にカスタマイズ
  • 専用のプリビュー表示と印字ボタン設置
スポンサーリンク

初期設定

設定といっても特には何もありませんが、1つだけ!
管理画面左メニューの「設定」→「パーマリンク」を開き、何も変更しなくていいので【変更を保存】を押してください。
カスタム投稿タイプを作成した後、WordPressに新しいURL構造を認識させ、カスタム投稿タイプの記事にアクセスできるようにするためです。
また、通知は必要ないという場合は、通知設定画面で通知オプションをオフにしてください。

通知設定画面について

管理画面左メニューの「プライベートメモ」→「通知設定」を開くと通知設定画面は大きく分けて3つの部分となっています。
・通知表示オプション
・メールでの通知時間設定
・メールでの通知テンプレート

順番に簡単な説明を行っていきます。

通知表示オプション

通知については、マイリスト以外は未完了の投稿だけが対象となります。

Setup1

各項目について

通知を有効にする:通知機能を有効・無効の切り替え。必要のない場合にはチェックを外す(初期値はオン)
通知方法:メール/管理画面/ダッシュボードから希望のものを選択、複数選択も可能(各サンプルを参照
通知対象がないときもメール送信を行う: メール通知を対象がないときにも送信(初期値は有効)
通知メール送信先:初期値はワードプレスで設定しているメールアドレスになります。(送信箇所は1か所のみ)
通知対象:期限切れ、今日、明日、○日前、から希望の物を選択、複数選択も可能
期限なし未完了メモも通知する:期限の設定されていない未完了投稿をすべて対象とする
マイリストの通知対象化:有効にした場合、未完了・完了に関係なくすべてが対象となりる
「○日前」の通知日数:期限日が何日先の物を対象とするか

メールでの通知時間設定

setup2

通知は毎日自動で送信されます(WordPressのCronを使用)。
各項目について

通知送信時間:通知時刻はワードプレスで設定した時間帯が基準となります
今すぐメール通知を送信 ですぐにメール送信可能
サーバーCronを使用する:サーバーのCronを使用して自動送信を行う場合
サーバーのCron コマンド:サーバー側でのcron設定時のコマンドとなります
エディター選択: Gutenberg、 旧エディターの選択が可能

メールでの内容確認等を行う際には手動で今すぐメール通知を送信ボタンを使ってテスト送信を行うことが出来ができます。
※ 通知方法でメールをオンにする必要があります

通知送信時間について

WordPressでは、疑似Cronが利用されており「誰かがサイトにアクセスしたとき」に定期処理が実行され、定した通知送信時間に送信します。そのため、サイトへのアクセスがないい場合には設定時間より遅延または送信されない場合もあります。
より正確に確実にスケジュール送信を望む場合は、サーバー側でCronを設定することをお勧めします。
設定の際には、サーバー側のCron実行時間を 通知送信時間と同じ又は通知時刻の後の時間に設定をする必要があります。

メールでの通知テンプレート

setup3

各項目について

メール件名テンプレート:件名はディフォルトで設定されていますが、ここで変更可能です。
メール本文テンプレート:本文はディフォルトで設定されていますがプレスホルダーとを使い自由に設定可能
プレースホルダーを挿入:6つの内容を投入可能です。(内容は下記参照)
メモ一覧の表示形式:カテゴリー別一覧表示、期限別一覧表示の選択が可能(各サンプル参照
メールフッター文:件名はディフォルトで設定されていますが、ここで変更可能です。
テンプレートを初期化:メール件名、本文、メールフッターをディフォルトに戻します。

メール本文で利用可能なプレースホルダー

メール本文で利用可能なプレースホルダー

  • {datetime}:メールの通知日時
  • {today}:通知日の日付
  • {note_list}:対象メモ一覧リスト(カテゴリー一覧形式または期限別一覧形式)
  • {note_count}:対象メモの全体の件数
  • {site_name}:サイト名
  • {note_list_url}:投稿一覧へのリンク

管理画面通知のサンプル

管理画面での表示項目は、通知設定で選択した対象になる通知の投稿数のみの表示となります。

notifications1

管理画面通知は、右上のⓍで再度ログインするまで非表示にできます。
非表示にした後、手動で通知を更新しても次のログインまでは非表示となります。

ダッシュボード ウィジェット通知のサンプル

ダッシュボードでの通知については、通知設定で通知対象にした投稿のタイトル一覧が表示されます

notifications2

マイリストの対象メモが通知対象期限の中に含まれる場合には黄枠のように⚠️が表示されます。
タイトル横の右端に表示されるリンクアイコンで直接編集画面へ移動ができます。
通知は毎回、ワードプレスにログイン時に更新されますが、”通知を更新”で手動でも更新できます。
手動で更新後、管理画面通知の下にメッセージが表示されます(管理画面通知のサンプル参照)

メール通知のサンプル

通知設定で通知方法でメールをオンにしている場合に、2通りの表示形式を選択が可能となります。
またメール通知はhtml形式(リッチテキスト軽視)となります。

・カテゴリー別表示形式
notifications_mail2

赤矢印の[確認]をクリックするとメモの編集画面へリンクします。
※ リンクを開くとワードプレスへのログインが求められます。ログインしない場合には開くことはできません。
マイリストをオンにしているメモについては、対象カテゴリーには含まれないようにしています。
カテゴリーよりもマイリストを優先させ重複しないようにしています。

・期限別表示形式
notifications_mail1

赤矢印の[確認]をクリックするとメモの編集画面へリンクします。
※ リンクを開くとワードプレスへのログインが求められます。ログインしない場合には開くことはできません。
期間別については、ダッシュボード通知と同じく、マイリストと重複するものについては黄枠のように表示されます。

テスト・確認方法

メールでの通知が機能しているか確認するには:

  1. 「通知設定」画面で「今すぐ送信」ボタンをクリック
  2. 登録済みのメモの中で、対象条件に合うものがあれば通知が届きます
  3. メールが届かない場合は、迷惑メール フォルダーなどを確認、また送信先メールアドレスも確認ください
スポンサーリンク

プライベートメモの使い方

使い方といっても通常の投稿記事と同じで特にはありませんが念のため。
プラグインを有効にすると左端のメニューに”プライベートメモ”が表示されます
メニューは
・プライベートメモ ⇨ プライベートメモ投稿一覧
・投稿を追加 ⇨ 新規投稿を追加
・メモカテゴリ ⇨ メモ専用のカテゴリー
・メモタグ ⇨ メモ専用のタグ
・通知設定 ⇨ 通知関連の設定画面
となります

メモの追加

管理画面左メニューの「プライベートメモ」→「投稿を追加」
投稿編集画面はシンプルな構成となります
右に表示されるサイドバーも項目を少なくしています

memo_post

・右サイドバーで「期限日」を選択、なければ設定の必要なし
・「ステータス」で「未完了」 or 「完了」を選択、初期値は「未完了」
・「マイリスト」マイリストに追加するかしないか。マイリストに追加すると通知設定や一覧での絞り込みに対応
※ 保存をすると自動的に投稿のステータスが”公開”となります。またステータスの初期設定は”未完了”となります。

プレビュー表示

通常の投稿編集と同じようにプレビュー表示ができますが、プライベートメモ専用のプレビュー表示となります。

preview

本文以外(サイドバー、ヘッダー、フッターなど)は全て表示されないようになっています。
本文の上に管理バーだけの表示となります。またスタイルについて、投稿編集画面では各テーマのスタイルが反映さていますが、プレビューではテーマのスタイルは反映されずシンプルなものになっています。
タイトルの下にステータス(未完了・完了)と期限日があれば表示されます
また、プレビュー画面の右上に”印刷する”ボタンを設置しています。

プライベートメモ投稿一覧

memo_list
  • 一覧画面上部からカテゴリ・タグ・ステータス・マイリストで絞り込みが可能
    ※ テーマによっては絞り込みボタンを押すと一覧に何も表示されなくなる場合がありますが、もう一度押すと絞り込みされた一覧が表示されます。
  • 期限日順でソート可能
  • 一覧上で各投稿の右端にあるステイタス切り替えボタンで「未完了・完了」の変更が可能

クイック編集

quick_edit
  • クイック編集を開くと、ステータスがラジオボタンで変更が可能
  • カテゴリ、タグの選択が可能
  • 期限の設定・変更が可能
  • マイリストへの追加が可能
スポンサーリンク

注意点

  1. インストール後、必ずワードプレス設定にあるパーマリンクで保存をしてください。(何も変更する必要はありません、保存のみ行ってください)
  2. プレビューで表示したくないもの、目次やスポンサーなどのassets/css/preview.cssに追記することで非表示にできます。

参考までに下記がpreview.cssの内容となります。

/* --- 通常画面用スタイル --- */
body {
  font-family: sans-serif;
  background: none !important;
}

.print-button-container {
  text-align: right;
  margin: 1em 0;
}

.print-button {
  background: #0073aa;
  color: white;
  border: none;
  padding: 0.5em 1em;
  font-size: 1em;
  cursor: pointer;
  border-radius: 4px;
}

/* ステータスバッジ */
.note-status-label {
  display: inline-block;
  padding: 0.3em 0.6em;
  border-radius: 4px;
  font-weight: bold;
  color: #000;
}
.note-status-complete {
  background-color: #c8f7c5;
}
.note-status-incomplete {
  background-color: #ffe9b3;
}

/* ステータスと期限日横並び */
.note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  margin-bottom: 1em;
  font-size: 1em;
  align-items: center; 
}

/* 見出し共通スタイル */
.entry-header h1 {
  font-size: 2em;
  font-weight: 700;
  border-bottom: 3px solid #333;
  padding-bottom: 0.3em;
  margin-bottom: 1em;
  color: #222;
}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-top: 2em;
  margin-bottom: 1em;
  font-weight: bold;
  color: #2a2a2a;
  position: relative;
  padding-left: 0.6em;
}

.entry-content h2::before,
.entry-content h3::before,
.entry-content h4::before,
.entry-content h5::before,
.entry-content h6::before {
  content: "";
  position: absolute;
  top: 0.1em;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: #0073aa;
}

/* サイズ階層 */
.entry-content h2 { font-size: 1.5em; }
.entry-content h3 { font-size: 1.3em; }
.entry-content h4 { font-size: 1.15em; }
.entry-content h5 { font-size: 1em; }
.entry-content h6 { font-size: 0.95em; }

/* --- 印刷専用スタイル --- */
@media print {
  .print-button-container,
  #wpadminbar {
    display: none !important;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .note-status-label {
    background-color: inherit !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .note-status-complete {
    background-color: #c8f7c5 !important;
  }

  .note-status-incomplete {
    background-color: #ffe9b3 !important;
  }

  .entry-content h2::before,
  .entry-content h3::before,
  .entry-content h4::before,
  .entry-content h5::before,
  .entry-content h6::before {
    background-color: #0073aa !important;
  }
}

目次やスポンサーなどを非表示にしたい場合上記のpreview.cssに追記ください。
下記は一例です。

例:目次、スポンサーなどを非表示 ( Cocoonの場合)
.toc-content {
display: none;
}
.ad-label {
display: none;
}
スポンサーリンク

Q&A

Q1. 通知されないメモがある

  • 通知設定で通知対象にチェックが入っているか確認
  • 期限日・ステータスが正しく設定されているか確認
    ※マイリスト以外は未完了の投稿のみが対象

Q2. Cron 実行時間を変更したい

  • 通知設定の「通知送信時間」を変更すれば、自動実行される時刻が更新されます
  • サーバー Cron を利用している場合は、サーバー側のスケジュール時刻も合わせて調整してください

Q8. メール通知が届かないのですが?

A. 通知メールが届かない場合、以下を確認してください:

  • 通知機能が「有効」になっているか(設定画面で確認)
  • 通知先メールアドレスが正しいか
  • サーバー側でメール送信が許可されているか(WP Mail SMTPなどで確認)
  • 通知対象が存在しない(未完了・期限内メモがない)場合は送信されない設定になっていないか

さいごに

【プライベートメモ】は、できるだけシンプルにメモを残すことを目的としています。
「ちょっとしたメモを非公開で残せたら…」という思いから自分だけのメモスペースとして、また日々の気づきややってみたことなどのメモとしてお役立立てれば嬉しいです。
「こんなことも記録しておけばよかった」と思えるような気づきが増えていくかもしれません。
気になった方は、ぜひ一度お試しください。

コメント

タイトルとURLをコピーしました