AstroでWP REST APIからページネーション

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

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

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

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

Astroやれや

結局気になって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やれや

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は書くことが多いけど、
こっち系は初めてというか微経験。

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

無料!MacでIEの動作確認テストができる「Remort IE」

こんばんは。

表題の通りなんですが、Macがメインで使っているマシンなので、
IEでチェックしたいときは、私の歴代パソコン4代目dynabookを見ないと駄目だったんですが、今は作業はほぼMacなので、ちょっとしたチェックにdynabookさんを起こすのはとっても面倒!

そんな私がみっけたのが「Remort IE」です!
アプリをダウンロードして、立ち上げるだけ!
設定も楽そうなのでコイツにしてみました!

以下、設定方法をまとめています。

1:Microsoftアカウントを作ろう

RemoteIEはMicrosoftさんのサービスです。
利用するのにアカウントが必要です。

https://remote.modern.ie/

スクリーンショット 2015-03-12 3.08.58

アカウントをもっていたら青いボタン「Sign In」
持ってなかったらその下の「Sign up Now」から情報を入力してやってください。

次に、住んでいる地域を設定。
日本ですので「East Asia」で「Submit」ボタン。

2:RemoteIEをインストール

先ほどの地域設定がおわると、インストールする端末を聞かれるのですが、リンク先がApp Storeですので、下記から直でダウンロードしてもOKだと思います。

Microsoft Remote Desktop

2:RemoteIEの設定

アプリを起動しましたらば、こんな画面が立ち上がります。
ここでは右上にある
「Azure RemortApp」をクリックします。

スクリーンショット 2015-03-12 3.24.05

するとMicrosoftアカウントを聞かれるので、
サインインしてやってください。

そしたら、こんな画面に。

スクリーンショット 2015-03-12 3.27.41

小さい方のポップアップのチェックボックスをいれたら、
大きい方の「IE technical Preview」をクリック!

すると真っ暗な画面からの〜

スクリーンショット 2015-03-12 3.31.30

IEちゃん、こんにちわ!

これでIEが検証できる環境ができました ;)

ちょっとこまった事

インストールが無事できてやっほい!とおもってたのですが、なぜかキーボードショートカットからのコピペが出来ない・・・普通に右クリック(コンテキストメニュー)からペースト選ぶとはっつけれた!

そいで、それに合わせて現れたこまったさん。
認証が必要なサイトの検証だったのですが、
認証に入るIDの設定で@(アットマーク)を含む文字列を利用していたのです。
コピペがなんせできないので直打ちで、@のキーをおすと、あれれ?

[ …!! 何これ!

[ ←コイツに変換されちゃうんです!

なんでかなあと思って気がついたんですけれど、
Remort IEさんをいじっているときは、
なぜかキーボードがUSキーボードとして認識されている模様!

ですので、USキーボードで@を出す時の

「shift + 2」

を押すと出てきました!アットマーク!

まぁそんなこんなで入れてみたRemortIEですが、
開発者ツールも使えるみたいなんで、
開発ツール上でIEのバージョン違いも検証できるみたいです。

本物のIEで見るにこした事はないのでしょうが、今ここでちょいとのぞきたい時には存分に威力を発揮するのではないでしょうか。

もしよろしければお試しくださいませ!

ではでは!

Google Analyticsが動かない・・・!

大分前から気づいてはいたのですが・・・
なんだかGoogle Analyticsが1月後半から動いて無かった模様

知っていたのに目をつぶってやり過ごしておったのですが・・・

そして対処したのが最近という滑り出し
のろまな亀です。
飛べない豚です。

もともとこのブログはwordpressでできており、
(まぁおもいっきりテンプレを利用してるので見た目でわかりますが)

Google Analyticsもプラグインから入れていたんです。
元々つかってたのは

Google Analytics by Yoast
https://wordpress.org/plugins/google-analytics-for-wordpress/

こちらだったのですが、どうにも動かないので、

1. wordpress側の外観 > テーマ編集から functions.phpに
トラッキングコードを貼付ける方法

2. wordpress側の外観 > テーマ編集から header.phpに
トラッキングコードを貼付ける方法

3. なんか別のプラグインを入れてみる

で、簡単やし他のプラグイン探すのも面白そうとおもったので3にしてみました!

今回入れたのはGoogle Analytics Dashboard for WP
https://wordpress.org/plugins/google-analytics-dashboard-for-wp/

です。

このこの優れているところWP側ダッシュボードにグラフが表示されるので、
確認がしやすいところ!

プラグインを入れたら、設定の下にGoogle Analyticsの項目が増えますので、
General Settingsへ。

そして、Get Access codeのリンクをクリックしますと、
googleアカウント認証画面 > OKを押すと、

アクセスコードが出ますので、
それをコピーして、もとの画面に戻り、貼付け。

それだけで設定はOKです。

これでダッシュボードにグラフが出てきました。
そして、アナリティクス側でリアルタイムの項目を確認してみると、
ちゃんとオイラがのぞいてる事が出てきましたので、これで復旧!

そもそもなんで急にとれなくなっちゃったのか原因はなんだかわからないですが・・・
なんかちょっとぐぐってみると、同じ時期に動かなくなった人もいたみたいですので
なんかあったのかなぁと。

とりあえず、ずっとやらなきゃと思ってた事ができてすっきりなのであります。

そいでは!

Jqueryでcssの疑似要素(before/after等)をごにょごにょしたい・・・!

タイトルの様な事がしたかったので、
こんな感じで対応いたしました!

[html]
$(‘head’).append(‘<style>.hoge:after{ color:#000000 !important;}</style>’);
[/html]

参考サイト

元は、ABテスト用に見た目をJqueryでいじっていく案件で、
トグルになってるリストの背景に設定された矢印が:afterで設定されていたため、
:afterが直で触れんものかと
色々ググってみたらば

悲しい事に「触れないよー」とか書いてある方が引っかかっていたのですが

参考サイトみてびっくり!
「そっかー!!超あったまいいー!!!」

これで次に出てきた時も対処できますねや!
スッキリ!

てやてや!

穏やかな一日にwordpressのセキュリティ

今日は寒かった〜!
でも、窓からの日差しがぬくくて、
ミルクティも美味しくて

最近ずっとずっとイライラしてたのが
急に、憑き物がとれたかの如く

ふんわりと、優しい気持ちになり
心が軽くなりました。
いつのまにか、イライラに住み着かれていたようです。

数ヶ月前の自分に戻ってきて
上司の自慢話や上から目線のお言葉も

なんでこんなに怒ってたんかな
と思うくらいに。

そんな光のどけき秋の日に。

お仕事でwordpressサイトいくつかを管理しているのですが、
パスワードを複雑な物にするのはもちろんのこと、
.htaccessにIP制限をかけたりとか

ログイン画面で一定回数間違えるとロックアウトする
Limit Login Attempts

ログイン時にログを取ってくれる
狂骨

など、色々なプラグインも入れたりとしていたり、
サイトによりけり使い分けてセキュリティ対策をしているのですが、

最近あるサイトでLimit Login Attemptsからメッセージがわんさか。
「めっちゃログイン失敗してるYO!めっちゃロックアウトしたYO!」

ってな感じでそのサイトのログをみますと、
入られてはいないのですが、
IPが韓国、ロシア、ドバイ、マレーシア… 世界の国からこんにちわで
ログイン問題に挑戦されていたようです。

もちろんIPなんて偽装でしょうが、
ブルートフォースアタックとかいう、
なんかスポーツ漫画で連携プレーを魅せる相手チームの技の名前みたいな
総当たり攻撃を受けていたようです。

一通り対策はしているものの、
海外アクセスがばんばんくるのは不安。

今回またセキュリティ対策を調べたところ
xmlrpc.phpというファイルに脆弱性があるようですので、
.htaccessにログイン画面とxmlrpc.phpにIP制限をかけておきました。

このブログもwordpressなんで、
プラグイン等の実験台になってくれるはず

てか頑張っていいかげんデフォルトのテーマじゃ無くて
自作テーマにしたい

(という思いを胸に秘め瞳を閉じます)

おやすみなされもせ。

忘れた頃にクラウドワークスの収支報告をするでござる

ユニコーンいいよユニコーン
懐かしいBESTを聞いているでござるよ

きょうは多分クラウドワークスを始めてから
1ヶ月立ったとおもふでござるよ!

って思ってみたら10月の7日に始めてました
あと一日まぁええや

っていうことで

どれだけ報酬をいただいたか、
UPします!!

スクリーンショット 2014-11-06 23.00.33

はいよー!
おかげさまでこんなにお小遣いがたまりました。

クラウドワークスに対して思う事は、
こういった仕事を受ける敷居を低くしてくれてありがとう
(でも手数料なんとかして20%高いよ!)

このままこうやって小さな案件を積み重ねて行きたいんですが、
ちょっと思った事がひとつ。

在宅だからって、ネット越しだからってやっぱり
バイトとかと比べると、
皆、安く発注しすぎとちゃうかなぁと。

なんて言うか、そないプロでもなんでもない私が
言うのはおこがましいけれども、

皆も安く受け過ぎじゃないかなぁと。

タスクとか1200字で300円くらいの案件
(これも手数料ひかれて240円になるし)

私は1200字、慣れたというか知識があって書きやすい題材でも、
レギュレーションを確かめたり、確認の為にいろいろ検索をかけたりして
結局かかったのは1時間以上だった。
(慣れたライターさんならもっと早いのかも知れないけど…)

1時間300円

って考えたら、このバイトに応募するやつおらんやろうと。

「素人に依頼するから」
っていう理屈でそうなってるのかもしれないけど、

例えば、
せっかく丁寧な仕事が出来る主婦さんが書いた素敵な記事を
誰かのお金稼ぎのサイトの中身に使われて
報酬が300円(いや、240円だ)。

その後どれだけその記事が注目を浴びても、
それ以上の料金を取る事はできない。

「頑張って!主婦!貴方の価値はそんなんじゃない!」

と勝手に想像の中の主婦を抱きしめたくなる

あと、そういった格安案件が増えていって、
「こんな安くでできるんや」と味をしめるトコが増えてきたら
本当のプロのライターさんまで迷惑がかかりそう。

だから、ライティングに自信がある主婦さんは、
もっとまともなトコを探した方がいいと思う。

それか収益まで時間がかかるであろうけれど、
自分で発信するか。

文句はいうてますが、
ありがたくおもてます
クラウドワークス様様です
いろいろ勉強させてもろてます

ふーねむい、
明日もいろいろどうなるやら

おやすみなさい