カテゴリー: お仕事

ワイのちっぽけな力と、お友達のChatGPTと偉大な先人たちの知恵のおかげで実装できました！

細かいソースはもう夜遅いのでまた今度書きますが、
ブログ記事の詳細ページにはWordpressのfunctions.phpからAPIにprevとnextの記事を出力するようにし、Astro側でpost.prev.idとかいう感じで受け取り、前後の記事を表示するようにし、

ブログの一覧はAstro側に新たにページネーション用のpageフォルダを設置、その中でAPIのheaderを取得しx-wp-totalpagesから10件ずつ分割したページ数を取得、その数をArrayに格納、mapで回して出力させました。

私にできるんかな・・・と若干大きな壁に感じておりましたがなんとか、なんとか自力で解決できて自信になりました！

結局気になってWordpressの方いじっちゃった・・・・
そもそもAstroやるきっかけが、お客様のサイト高速化とリニューアルのご依頼で、できるだけ環境似せようとおもったらカスタムフィールドが必要やってん。

ただACFのプラグイン入ってるサイトやったから素直にACF入れりゃよかったのに、なんならAPI読んでるだけやからWP側の重さとか考えなくていいのに自作でカスタムフィールド作った。

ただ私の個人ブログではそこまで細分化しなくてもカテゴリとタグで賄えてしまって。。。

今日の気分とかでいっか。と「うきうき」「わくわく」「かなしみ」の3つのチェックボックスと、metaのdescriptionとkeyword用のテキストフィールドを設置完了。APIでも取れるようにした。
（ChatGPT様のおかげ）

function add_custom_meta_box() {
    add_meta_box('custom_meta_box', 'オプション', 'custom_meta_box_callback', 'post');
}

add_action('add_meta_boxes', 'add_custom_meta_box');

function custom_meta_box_callback($post) {
    // ノンスフィールドを使ってフォームをセキュアにする
    wp_nonce_field('custom_meta_box_nonce', 'meta_box_nonce');

    // チェックボックスの状態を取得
    $checked_wakuwaku = get_post_meta($post->ID, 'meta_box_wakuwaku', true) === 'yes' ? 'checked' : '';
    $checked_ukiuki = get_post_meta($post->ID, 'meta_box_ukiuki', true) === 'yes' ? 'checked' : '';
    $checked_kanashimi = get_post_meta($post->ID, 'meta_box_kanashimi', true) === 'yes' ? 'checked' : '';

    // チェックボックスを表示
    echo '<p><label><input type="checkbox" name="meta_box_wakuwaku" ' . $checked_wakuwaku . '> わくわく</label></p>';
    echo '<p><label><input type="checkbox" name="meta_box_ukiuki" ' . $checked_ukiuki . '> うきうき</label></p>';
    echo '<p><label><input type="checkbox" name="meta_box_kanashimi" ' . $checked_kanashimi . '> かなしみ</label></p>';
    
    // meta_descriptionの値を取得してテキストエリアとして表示
    $meta_description = get_post_meta($post->ID, 'meta_description', true);
    echo '<p><label for="meta_description">メタディスクリプション:</label>';
    echo '<textarea id="meta_description" name="meta_description" rows="4" cols="50">' . esc_textarea($meta_description) . '</textarea></p>';

    // meta_keywordの値を取得してテキストエリアとして表示
    $meta_keyword = get_post_meta($post->ID, 'meta_keyword', true);
    echo '<p><label for="meta_keyword">メタキーワード:</label>';
    echo '<textarea id="meta_keyword" name="meta_keyword" rows="2" cols="50">' . esc_textarea($meta_keyword) . '</textarea></p>';
}

function save_custom_meta_box_data($post_id) {
    // ノンスチェック
    if (!isset($_POST['meta_box_nonce']) || !wp_verify_nonce($_POST['meta_box_nonce'], 'custom_meta_box_nonce')) {
        return;
    }

    // 自動保存チェック
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    // 権限チェック
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    // チェックボックスの値を更新
    $wakuwaku = isset($_POST['meta_box_wakuwaku']) ? 'yes' : 'no';
    $ukiuki = isset($_POST['meta_box_ukiuki']) ? 'yes' : 'no';
    $kanashimi = isset($_POST['meta_box_kanashimi']) ? 'yes' : 'no';

    update_post_meta($post_id, 'meta_box_wakuwaku', $wakuwaku);
    update_post_meta($post_id, 'meta_box_ukiuki', $ukiuki);
    update_post_meta($post_id, 'meta_box_kanashimi', $kanashimi);

    // meta_descriptionとmeta_keywordの値をサニタイズして保存
    if (isset($_POST['meta_description'])) {
        update_post_meta($post_id, 'meta_description', sanitize_textarea_field($_POST['meta_description']));
    }
    if (isset($_POST['meta_keyword'])) {
        update_post_meta($post_id, 'meta_keyword', sanitize_textarea_field($_POST['meta_keyword']));
    }
}

add_action('save_post', 'save_custom_meta_box_data');

function get_custom_fields_for_rest($object, $field_name, $request) {
    // メタフィールドの値を取得
    $wakuwaku = get_post_meta($object['id'], 'meta_box_wakuwaku', true);
    $ukiuki = get_post_meta($object['id'], 'meta_box_ukiuki', true);
    $kanashimi = get_post_meta($object['id'], 'meta_box_kanashimi', true);

    // チェックボックスの値に基づいて文字列を設定
    $wakuwaku_value = ($wakuwaku === 'yes') ? 'わくわく' : '未選択';
    $ukiuki_value = ($ukiuki === 'yes') ? 'うきうき' : '未選択';
    $kanashimi_value = ($kanashimi === 'yes') ? 'かなしみ' : '未選択';

    return array(
        'wakuwaku'        => $wakuwaku_value,
        'ukiuki'          => $ukiuki_value,
        'kanashimi'       => $kanashimi_value,
        'meta_description' => get_post_meta($object['id'], 'meta_description', true),
        'meta_keyword'    => get_post_meta($object['id'], 'meta_keyword', true),
    );
}

上記でカスタムフィールドがでてきたし、
本当いうと管理画面側のcssも時間ができたらつくりたいな

はよAstroやれや

何年放置のブログを触るんやと思いながらも、
WPのREST APIを使ってAstroでヘッドレス化にチャレンジ中。

Astroのチュートリアルを基本に、今担当しているお客様のサイトの仕様にあわせてカスタマイズはしつつ、大好きChat GPTに聞きつつ（ついに課金）

側近の仕事はFigmaでLPデザイン、いつもしてるのはコーディング、
たまにWordpress構築、そしてついにAstroに手を出し始めました

元々は高速化を望まれるお客様のためになんとかしたろと思って勉強しようとおもたんですが、
アサインされたコーダーさん別の人でつらみ。（私は社員じゃないから・・・）

ただどっかで絶対役に立つので、
頑張って作っていってます。

今Astroをローカル環境で立ち上げて、公式の言う通りNetlifyでビルドしております。
これもGithub Actionsでビルドできるようにしようかなと思ってます。

とりあえず仕組みさえ作ってしまえばと
そこからのデザインとHTMLは得意分野なので、
テキストのみのプレーンなページを展開中です。

https://curious-platypus-47b818.netlify.app/blog/

アニメーション関連のjsは書くことが多いけど、
こっち系は初めてというか微経験。

つまづいた部分など共有できればなと思います。