Vinking

現在、私のブログのホームページには通常の記事と『ちょっと言いたいこと』の 2 種類の異なるものがあります。『ちょっと言いたいこと』は、日常の愚痴やわざわざ記事にする必要のないことをうまく処理できます。次に、Cuteen テーマを例にして、自分のテーマに独自の『ちょっと言いたいこと』を追加できるようにします。

あなたは短い記事を書き終えましたが、その長さやタイプは以前書いた記事とは異なり、この記事は記事というよりも、友人のタイムラインやスペースのつぶやきに近いものです。そこで、ブログのホームページにこの独特な記事を表示するための新しいタイプを追加したいと考えています。あなたは考えを整理し、やるべきことは 2 つだけだと知っています。それはTypecho がこの新しく完成した記事が何であるかをどうやって知るか？ そして 記事のタイプに応じて異なるスタイルでレンダリングするにはどうするか？ さあ、始めましょう。

Typecho がこの新しく完成した記事が何であるかを知るようにする#

ちょうど Typecho はこの機能を提供しています。それはカスタムフィールドと呼ばれています。

カスタムフィールド#

Typecho では、カスタムフィールドは公式がユーザーのカスタマイズのために残したインターフェースです。記事作成ページで対応する情報を選択または入力することで、Typecho はこれらの情報に基づいてこの記事の特定の処理方法を決定できます。

あなたはこの機能がまさにあなたの考えにぴったりだと感じています。記事を公開する際に記事かつぶやきかを選択するだけで、Typecho はどのようなスタイルでレンダリングするかを知ることができます。

テーマフォルダ内を探していると、coreフォルダ内のFields.phpでthemeFields関数を見つけました。この関数は記事にカスタムフィールドを追加できます。

あなたは関数に以下の修正を加えました：

/* ... */

function themeFields(Typecho\Widget\Helper\Layout $layout)
{
    $excerpt = new Typecho\Widget\Helper\Form\Element\Textarea('excerpt', null, null, '記事の要約', 'カスタム要約を入力してください。空白の場合は自動的に記事から切り取ります。');
    $layout->addItem($excerpt);
    $imgst = new Typecho\Widget\Helper\Form\Element\Text('imgst', NULL, NULL, _t('記事のサムネイル'), _t('ここに画像のURLを入力して、記事リストに画像を追加します'));
    $layout->addItem($imgst);
    $catalog = new Typecho\Widget\Helper\Form\Element\Radio(
        'catalog',
        array(
            true => _t('有効'),
            false => _t('無効')
        ),
        false,
        _t('記事目次'),
        _t('デフォルトは無効で、有効にすると記事内に「記事目次」（自動的にH1〜H6タグにマッチ）を表示します')
    );
    $layout->addItem($catalog);

    /* あなたの上のコードは私のものと異なるかもしれませんが、上のコードはそのままにして、関数の末尾に以下のコードを追加してください */
    $isSpeak=new Typecho_Widget_Helper_Form_Element_Select('isSpeak',['0'=>'だめ','1'=>'はい'],'0','つぶやきかどうか');
    $layout->addItem($isSpeak);
}

ここでTypecho_Widget_Helper_Form_Element_Selectクラスはドロップダウン選択ボックスを作成するためのメソッドを提供します。ここでは、$isSpeakという名前の_ドロップダウン選択ボックスフォームフィールド_を作成し、選択肢は_だめ_と_はい_の 2 つで、初期値は 0、つまりデフォルトで_だめ_が選択され、同時にバックエンドエディタのカスタムフィールドにこのフィールドの名前が_つぶやきかどうか_として表示されます。

追加後、バックエンドエディタに再度入ると、以下のカスタムフィールドが表示されます：

これで、あなたはこの記事に『はい』という選択肢を選びました。公開後、Typecho はこの記事がつぶやきであることを知ります。

記事のタイプに応じて異なるスタイルでレンダリングするには？#

次に、ホームページのコードを修正して、先ほど定義したフィールドに基づいて異なるレンダリングを行う必要があります。index.phpを開くと、次のようなコードが見えます：

<?php while ($this->next()): ?>
    <?= Context::IndexList($this) ?>
<?php endwhile; ?>

これは記事リストを表示するためのループコードであり、ContextクラスのIndexListメソッドがこのループ内の記事情報を持つ構造を返すことがわかります。このContextクラスはcoreフォルダ内のContext.phpにあります。あなたはこのIndexList関数を修正し、つぶやきタイプの記事かどうかを判断するためのifを追加する必要があります：

public static function IndexList($ctx): string
{
    if ($ctx->fields->isSpeak === '1') {
        //つぶやきタイプ、構造を自分で修正できます
        $str = "
        <article class='article". ($ctx->sequence % 2 == 0 ? ' flex-row-reverse ': ' ') ."speak'>
            <a style='width:100%' href='" . $ctx->permalink . "'>
                <div class='speakContent'>
                    <div class='speakNav'>📖 つぶやき</div>
                    <div class='speakDesc'>" . Context::ArticleExcerpt(1000 , $ctx) ."</div>
                </div>
            </a>
        </article>";
    }else if ($ctx->fields->isSpeak === '0' || $ctx->fields->isSpeak === null){
          # ここに元のreturn $str;の前のコードを包みます：
          # $img = self::ImageEcho($ctx);
          # ...
          # $str .= '<a class="article-description" href = "' . $ctx->permalink . '" > ' . Context::ArticleExcerpt(100, $ctx) . '</a ></div ></article > ';
    }
    return $str;
}

ここでContext::ArticleExcerpt(1000 , $ctx)は Cuteen テーマのメソッドを呼び出して、ホームページで最大 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 がないため、あなた自身で対応する CSS ルールを作成する必要があります。ここでは詳しく説明しません。

この記事は Mix Space によって xLog に同期更新されました。
元のリンクは https://www.vinking.top/posts/codes/typecho-custom-post-type-tutorial