Note

😫 この記事は面倒くさがりの方には向いていません

この記事ではテーマコードの変更を行うため、テーマをアップデートするたびに以下の修正を再度行わないと効果がなくなります。ご覧のとおり、私のテーマバージョンは 20230131 のままです。

📦 必ずバックアップを取ってください

作業前にテーマファイルとデータベースファイルをバックアップし、操作ミスで元に戻せなくなるのを防いでください。

🍦 初心者向け

この記事はコード初心者向けに、思考プロセスを詳しく解説します。ある程度コーディングができる方は、手順部分を飛ばしてコードだけ確認してください。

現在、私のブログトップページには通常記事と『つぶやき』という 2 種類のコンテンツがあります。『つぶやき』は日常のつぶやきや、わざわざ記事にするほどでもないことを手軽に投稿するのに便利です。以下では Cuteen テーマを例に、自分だけの『つぶやき』機能を追加する方法を紹介します。

短文の投稿を書き終えたけれど、長さもタイプも今までの記事とは違う。これは記事というより、SNS のつぶやきに近い。そこで、ブログトップにこの特別な投稿を表示する新しいタイプを追加したい。考えを整理すると、やるべきは 2 つだけ：Typecho に「これは何の投稿か」を認識させる方法と投稿タイプに応じて見た目を変えてレンダリングする方法だ。さあ始めよう。

Typecho に「これは何の投稿か」を認識させる

幸い Typecho にはカスタムフィールドという機能がある。

カスタムフィールド

Typecho のカスタムフィールドは、ユーザーが自由に情報を追加できる公式インターフェースです。記事編集画面で情報を選択・入力することで、その情報に基づいて投稿の処理を変えることができます。

これはまさに今回のアイデアにぴったりの機能だ。投稿時に「記事かつぶやきか」を選べば、Typecho がレンダリングスタイルを切り替えてくれる。

テーマフォルダ内を探しまわった結果、core フォルダ内の Fields.php にある themeFields 関数が記事にカスタムフィールドを追加できることが分かった。

Note

🔔 注意：テーマによってカスタムフィールドを追加するファイルの場所や名前は異なります。例えば Sunny テーマの themeFields 関数は functions.php ファイルの 1292 行目にあります。ファイル名や場所はテーマ作者に確認するか、管理画面のファイルエディタで既存のカスタムフィールド名をヒントに Ctrl + F で検索してください。

以下のように関数を修正した：

Typecho_Widget_Helper_Form_Element_Select クラスはプルダウン選択ボックスを作成するもので、ここでは $isSpeak という プルダウンフォームフィールド を作成し、「だめ」「はい」の 2 択、初期値は 0（「だめ」）、管理画面のカスタムフィールド欄には「つぶやきですか？」という名称で表示される。

Note

注意：初期値は 0（通常記文）にしておくことを推奨します。0 にしないと過去の記事が全部つぶやき扱いになってしまいます。

追加後、管理画面のエディタで以下のカスタムフィールドが見えるはず：

これで記事に『はい』を選んで公開すれば、Typecho は「これはつぶやきだ」と認識する。

投稿タイプに応じて見た目を変えるには？

次に、トップページのコードを修正して、先ほど定義したフィールドに基づいてレンダリングを切り替える。index.php を開くと以下のコードがある：

これは記事一覧をループ表示するコードで、Context クラスの IndexList メソッドを呼ぶことで記事情報を取得している。この Context クラスは core フォルダの Context.php にあり、IndexList 関数を修正して if でつぶやきタイプかどうかを判定する：

Context::ArticleExcerpt(1000 , $ctx) は Cuteen テーマのメソッドを呼び出してトップページに最大 1000 文字表示させ、長すぎて見た目が崩れるのを防いでいる。必要に応じて値を変更してください。

Note

注意：Cuteen 以外のテーマではすべての $ctx-> を $this-> に置き換えてください（Cuteen は Context::IndexList($this) で $this を $ctx に渡しているため）。また Cuteen 以外では Context::ArticleExcerpt(1000 , $ctx) は使えないので、mb_substr($this->fields->excerpt, 0, 1000, 'UTF-8') などで先頭 1000 文字を出力してください。

while ($this->next()) が見つからない場合【Sunny テーマ例】

テーマの index.php に while ($this->next()) がない場合は、F12 で記事を囲う要素を特定してみてください。ここでは <div class="postlist_out "> です。index.php でこのクラス名 postlist_out を検索します。見つからなければ親要素 <main class="main_body"> を探して index.php で検索、以下同様です。

main_body を検索すると、記事一覧を出力するファイル article.php が見つかりました。

article.php を開き、while ($this->next()) を検索すれば記事構造が見つかります：

保存すれば、あなただけの『つぶやき』機能の完成です。ただし今の『つぶやき』には専用の CSS がないので、自分でスタイルを書く必要がありますが、ここでは省略します。