@Blog

画像の軽量化．webpにしてみたら普通に軽いみたいですね．

2024.11.19

Logging

おはようございます．先日の休みの日に前から気になっていた画像の表示速度を改善したくてwebpという画像圧縮を採用しました．webpに関しては数年前に一度記事にはしていたのですが、その当時はブラウザの方が対応していなくて途中でもとに戻したような気がします．

今回はwebpを採用してこのまま運用していこうと思っています．過去の画像も一括でwebpにしました、それと同時に今までTopに配置していた動画も除けました．

ちょっと物足りない感じはしますが、表示速度を速くしてモバイルファーストに近づけていこうと思います．尚、webpにするためにewwwというプラグインを導入しています．

導入して上手く表示がwebpに変換されたかなと思ったら上手く変換されなかったので、自作のプラグインを作り力技でwebpに変換した形になります（画像はWebpに変換されましたがコードを見るとそのままだったので）．

明日へ続く

タグ

ewww, TOP, webp, コード, ブラウザ, プラグイン, もと, モバイルファースト, 一括, 休み, 作り力技, 形, 気, 物足りない感じ, 画像圧縮, 自作, 表示速度, 途中, 過去,

指定日に記事を削除するWPのプラグインの雛形．

2024.10.24

Logging

おはようございます．指定日に記事を削除するWPのプラグインの雛形を作りましたが記事の削除部分（article_del_R）はご自身で作ってください．削除部分をご自身で作り自分のサイト（WP）を定期的にcronで叩けば削除される仕組みです．
毎度のことですみませんがソースコードを解析してお使いいただければと思います．また、このコードは試作品になります．

WPプラグインの画面はこんな感じです．

ソースコードはQiitaで公開しています．

因みにワードプレスで非同期処理を行うのは少し面倒です、たまに間違った情報を掲載しているサイトがあるので注意が必要です．下記で非同期処理を設定しまうとログアウトした状態でも叩けるらしいので気おつけてください！．

“wp_ajax_nopriv_{$action}”

明日へ続く．

タグ

Action, article_del_R, cron, qiita, wp, wp_ajax_nopriv, WPプラグイン, コード, ソースコード, プラグイン, ワードプレス, 下記, 削除部分, 毎度, 注意, 状態, 画面, 試作品, 雛形, 非同期処理,

ChatGPTで記事を生成するWordPressの無料非公式プラグイン

2024.10.09

Logging

おはようございます．ChatGPTで記事を生成するWordPressの無料非公式プラグインを作りました．動作環境はPHP8.1以上です．ご使用する場合、WordPressのプラグインフォルダに解答したフォルダを転送してご使用ください．

記事を量産する前にOpen APIにて事前にAPIKeyを取得してください．プラグイン管理画面より取得したキーを入力欄に入力し「変更を保存」をクリックし保存してください．

「変更を保存」ボタンはAPIKeyを保存するボタンになります．

保存後、タイトルや投稿日時、生成させたい記事に対してのキーワードをそれぞれ入力して「記事を量産する」ボタンをクリックすると記事の生成が始まります．尚、タイトルは生成記事を作るのに影響を与えません．記事生成に影響するのはキーワードのみとなります．

最後にプラグインのURLはこちらになります．

plugin/chatgpt-auto-article.zip

明日へ続く．（明日の記事は生成AIで生成されたものです）

タグ

APIKEY, ChatGPT, chatgpt-auto-article.zip, Open API, plugin, url, WordPress, キー, キーワード, タイトル, フォルダ, プラグイン, プラグインフォルダ, プラグイン管理画面, 保存, 最後, 無料非公式プラグイン, 生成, 生成AI, 生成記事,

ランキングと一言メッセージ機能を追加した話．#wordPress

2024.07.20

Logging

おはようございます．先日ちょこちょこっとランキングと一言メッセージ機能を追加しました．ちなみに両方を追加するにかかった時間は20分もかからずに追加．昔、PHPを独学で始めたときからすれば圧倒的に速く対応が出来るようになっているのだけども、それと相反して簡単過ぎて喜びや達成感があまりないのが問題．

今後、大きな機能変更する可能性が少しあってWordPressとVueで構築し直そうかなと思っている．まだ、思っているだけで出来たら良いなぐらいです．ググるとその方法を書いているサイトが結構あるのですが、プラグインの対応が書かれていない．そこが解決出来るのであれば変更してみたい気持ちはあります．ちなみにVue等で構築するとSEOに強くなるらしいです．

今回、機能追加した二点ですが、とくに一言メッセージを推しています．使って頂けると結構励みになりますので是非．

明日へ続く．

タグ

php, SEO, Vue等, WordPressとVue, プラグイン, ランキング, 一言メッセージ, 一言メッセージ機能, 両方, 二点, 可能性, 問題, 少し, 方法, 時間, 機能, 気持ち, 独学, 追加．昔, 達成感,

ラッコキーワードを少し活用してみようって．

2024.06.03

Logging

おはようございます、ラッコキーワードを少し活用してみようって思って会員登録をしてみました．ラッコキーワードとはGさんのサジェストからキーワード候補を列挙してくれて、どのキーワードが多く使われているかなどがランク付けで表示してくれるサービスです．

ラッコキーワードの他にもいろいろなサービスを提供しています．

ラッコキーワードと生成AIをかけ合わせて記事の量産する方法や作ることは可能です．もし使用したい方はワードプレスになりますが、プラグインを作っているのでそちらを参照して頂けばと思いますが、自分はオススメしません．

理由は生成AIで量産したものを見抜くAIが開発された場合、今まで価値のあった記事が紙くずになる可能性があるのでオススメしません．面倒くさいかもしれないかもですが、人の代替はきかないと思っています😌派なので地道に記事を書くことが大切になるような気がします．

明日へ続く．

タグ

AI, Gさん, キーワード, キーワード候補, サービス, サジェスト, プラグイン, ラッコキーワード, ランク付け, ワードプレス, 代替, 会員登録, 価値, 可能性, 少し, 気, 派, 理由, 生成AI, 自分,

Devのサイトマップ

2024.05.08

Logging

おはようございます、devのサイトマップがルートから繋がっていなかったので繋げたという話．自分は繋がっていると思いこんでいたけどそうではなかった．wpにはAll in one seoというプラグインを入れているとサイトマップが自動で生成されるのだけどもDevの方のリンクも取得してくれると思っていたがそうではなかったので手動で追加しました．

All in one Seoの設定手順は、設定からサイトマップタブをクリックしURL追加項目に追加するだけです．これをすることによりクローラーが巡回してくれるようになります．巡回してくれからと言って検索に拾ってくれるかというとそうでもない．

競合が多いと検索の隙間を見つけないとなかなか難しいのが現状です．SEOは最低限で良いと思う理由はゴリゴリしているとスパムサイトに間違われたりするので最低限で十分だと思います．

そしてAI技術が進化していく中でどこまでクローラーが収集した情報が検索順位の基準データとして判断されているのだろうかと思う今日この頃です．AI攻略にシフトした方がこれからは検索上位を狙えそうですね．AI攻略とは人が読んで理解しやすいかどうかだと思います．

分かりにくい記事は嫌煙されそうです．

明日へ続く．

タグ

AI技術, AI攻略, all in one seo, dev, SEO, wp, クローラー, サイトマップタブ, スパムサイト, プラグイン, ルート, 今日この頃, 手動, 最低限, 検索順位, 現状, 競合, 設定手順, 隙間,

機械学習でオススメ記事を作ってみる。

2023.10.24

Logging

おはようございます、機械学習でオススメ記事を作ってみる。仕組みはこんな感じです😄。

• 記事から同じ傾向の記事を取得する。
• 記事のMeCabを使用して分割。分離したものを機械学習に投入。
• 出来上がったモデルから似ている傾向の記事を抽出。
• 新規記事を投稿した場合、再学習させモデルに追加。

上記の流れをCHATGPTに投げ込んでコードを生成してもらい、そのコードを再修正してAPI化したものを仕事終わりに週末作ろうと思っています。出来ればそれを元に自分だけしか使えないプラグインにしてWordPressに取り組むつもりでいます。

これでどれぐらいの精度がでるのかは、やってみないと分かりませんが試す価値はあるかなって思っています。あと、作りたいのはクリックしたものを機械学習させて何か出来たら良いなって思っています、また、記事学習モデルから、チャット形式でこんな記事はどうですかってオススメする物を作りたいですね。

明日へ続く。

タグ

API化, ChatGPT, Mecab, WordPress, コード, チャット形式, プラグイン, モデル, 仕事終わり, 価値, 傾向, 元, 分割, 投入, 抽出, 機械, 機械学習, 精度, 記事学習モデル, 週末,

広告収入とサーバー代がとんとんになれば。

2023.10.23

Logging

おはようございます、広告収入とサーバー代がとんとん様に来年からはVPSサーバーをダウングレード出来そうです。VPSサーバーをかなり低予算サーバーに変えるので何とかとんとんに持っていけそうですが、これにドメイン費用をプラスすると赤字運営なのですが、何とか来年は黒字化したいですね。

おそらく自分の全知識をブログのバックエンドサービスに導入すればそれなりに黒字化出来そうな気もします。例えば生成AIなどを使用して記事を大量生産するなどを行い。

アクセスデータからヒットする記事を機械学習させて、それに特化した記事を量産するとかを頑張れば出来そうな気もします。

実験的にそういうことをするのは楽しいのですが、それで儲けても虚しい気がします。そういう事もあって記事の量産出来るプラグインもオープンにしましたからねぇ・・・。ちょっと商売気質ゼロです、ここを直さないといつまで経っても赤字運営のままな気がします。

因みにドメイン費用は年間２万円ぐらい払っているので・・・結構道のり険しいです。なお、月５００円のレンタルサーバーと月１０００円のVPSサーバー費用が発生したとしての計算です。それは何とか相殺出来るようになりました😭。ありがとうございます。これも皆様のおかげです🙇。

明日へ続く。

タグ

VPSサーバー, VPSサーバー費用, おかげ, かなり低予算サーバー, サーバー代, ドメイン費用, バックエンドサービス, プラグイン, レンタルサーバー, 商売気質ゼロ, 大量生産, 広告収入, 来年, 機械, 生成AI, 皆様, 虚しい気, 計算, 赤字運営, 黒字化,

filament[フィラメント：細糸]というLaravelのアレ。

2023.07.26

Logging

おはようございます、filament[フィラメント：細糸]というLaravelの管理画面とかが作れてしまうライブラリの紹介。これを知ったのは会社のMTGかも知れませんが、再度じぶんでも調べてみた結果。かなり使えるライブラリです。

前前前会社で独自フレームワークで作っていた部分をこれを使用するとあっという間に作り上げることが出来るのではないだろうかと思っています。また、これを使用して自分のサービスを作ることも簡単とまではいかないものの、時間短縮にはかなりなると思います。

商業利用可能なMITライセンスです、これはとても有り難いなって思います、またプラグインとかもあるので、本当に良い感じですね。トイウコトデ、本当に前前前会社で作っていたBASEのようなサービスを作ってみたいなって思っています。

休日の合間に少しずつ作りたい。基本土曜日は一週間分のブログ記事などを書き溜める作業をしていたり、午前中までは大体、家でコード書いたりしているのでその作業にサービスを作る作業を追加したいなって思っています。

因みに午後からはお出かけしたりするタイプです、特に夏は外に出ていかないと損している気がします、こんなに晴れているのに出掛けないというのは勿体ないと思う性分なんです。

それではまた～。

タグ

base, filament, Laravel, LIST, MITライセンス, MTg, PL6tf8fRbavl39r1g14lgYjPOH6jrjSECv, あっという間, トイウコトデ, フィラメント, プラグイン, フレームワーク, ライブラリ, 休日, 再度じぶん, 前前前会社, 勿体, 合間, 性分, 細糸,

Noteみたいな購読機能がワードプレスでも可能。

2023.07.09

Logging

おはようございます、Noteみたいな購読機能がワードプレスでも可能になるツール（プラグイン）のご紹介、これを使用するとNoteみたいな購読機能が作れるので便利です。プラグインのリンクはこちらから（因みにcodocのアカウントも必要になります）。

このcodocというサービスは、はてなブログとも連携しているサービスなのでそうそう無くなることがないサービスかと思いますし日本の会社なのである程度安心感もあると思います。

こういうサービスを自前する場合、クレジット決済会社と提携（審査あり）したり、ブログに購読機能を作るのに費用発生するので、かなりアクセス数の高い人ではないとペイ出来ないと思います。

コードクはワードプレスで運用していてnoteに移れないぐらいどっぷり大量の記事を持っている人は、コードクは購読機能を追加する選択肢としては「有り」だと思います。

自分のブログは一見さんが多いので、今のところ取り入れるつもりはないですがブログを停止してNoteへ移行する可能性は少しあります。ただ、猫も杓子も状態のNoteへ移行しても難しそうなので当分、ブログは続けると思いますが、新たなテキストプラットホームが登場したらそちらへ移行する可能性はあります。

タグ

codoc, note, アカウント, かなりアクセス数, クレジット決済会社, コードク, ツール, テキストプラットホーム, プラグイン, ワードプレス, 一見さん, 審査, 提携, 杓子, 猫, 程度安心感, 費用, 購読機能, 選択肢,

書いているけど、あまり実行しない人。#デジタルとアナログの共存

2023.06.29

Logging

おはようございます、書いているけど、あまり実行しない人です。本当は実行しているけどやってみたらそれほど面白くなかったと思うことがあり。継続しないものがたまにあります。例えばchatGPTでブログ記事を量産するプラグインを先日ちょこちょこっと作りました。

上手く作れたと思いますが自分は使っていないです。作る過程は面白いだけど使うのは一回だけで良いかなって思ってしまいます。記事を書くのは楽しいのでこれからも自分の手を動かしていくと思います。

おそらく、選択肢として生成AIを使用する人はこれから増えてくると思いますが人が作ったものが売れなくなるとは自分は思っていないです。電子書籍が登場したとき紙の本はなくなるだろうなって思っていましたが実際は違って電子書籍も紙の本も未だにあります。

なので、生成AIも同じような感じで選択肢の一つとしてあるけど１０年後も人は手を動かして働いていると思います。

追伸：人工知能の話でいうと１０年後あたりから自動運転車はこんな地方でも乗っているひとがチラホラ出てくるのだろうと思っていますが、これもまた人が運転しない車がなくなることもないような気がします。人の常識とか思い込みを変えるには一世代ぐらいの時間がかかるじゃないかって、この頃を思い出しています。

タグ

ChatGPT, ひと, プラグイン, 一世代, 人工知能, 地方, 実際, 常識, 感じ, 未だ, 本, 生成AI, 紙, 自動運転車, 話, 車, 追伸, 過程, 選択肢, 電子書籍,

ワードプレスのchatGPT-APIを使ったプラグイン #chatGPT

2023.06.28

Logging

おはようございます、ワードプレスのchatGPT-APIを使ったプラグインを作りました。1つ目は日本語記事を英語に翻訳してUPするプラグインです、このプラグインは公開時に一回だけ英語に変換されます。その後手直しが可能です。これからは日本語で記事を書いて英語化されたものを公開するとグローバルに記事を見ていただけるかなって思って作ったのですがどうなんでしょうね？

もう一つ目は、一週間分の記事を単語から連想して記事を自動で書いてくれるといったちょっと問題作のプラグインです。これで記事を書くことから開放されます。記事はすべて予約投稿になります。記事を直したい場合は編集画面で手動で記事を直してください。

両方ともGitHubとQiitaでソースコードを公開しています、ご自由にご使用ください。なお転売禁止します。

こちらのリンクからソースコードは参照できます。

・日本語記事を英語に翻訳するプラグイン

・単語から連想して記事を自動作成するプラグイン

タグ

chatGPT-API, github, qiita, すべて予約投稿, ソースコード, プラグイン, リンク, ワードプレス, 両方, 公開時, 単語, 問題作, 手動, 手直し, 日本語, 日本語記事, 編集画面, 英語, 英語化, 転売,

昨日まで英語の記事でした。実験的な何か？。

2023.06.24

Logging

おはようございます。昨日まで英語の記事でした。実験的な何かです？

chatGPTに日本語記事を英語の記事にしてもらいました。来週の水曜日にchatGPTを使用したワードプレスでプラグインを公開します。2つほどプラグインを作ります。1つ目は日本語記事をプラグインで英語に変換するプラグインです。もう一つはちょっと問題作なのでアルゴリズムとソースコードを公開します。

これからchatGPTのAPIを活用したプラグインが続々と世に出ていくと思いますが、やはりchatGPTはテキストの相性抜群だと思います。因みにワードプレスのプラグインのソースコードを書いてと問い合わせを行えばソースコードの例文を書いてくれますが、これがちゃんと動くかどうかは微妙ですね。

chatGPTはたまに間違った返答を書きます、なんだか人を試しているかのように。それを見抜く力がないと大変です。なのでchatGPTを使用するには一定量の知識が必要になりますし検証は大事です。今の機械学習の精度は問い合わせにより解答の精度が違いますので、知識量が多いと上手く解答を導き出すことが出来るかと思います。

タグ

API, ChatGPT, アルゴリズム, ソースコード, テキスト, プラグイン, ワードプレス, 一定量, 例文, 問題作, 検証, 機械学習, 水曜日, 相性, 知識, 知識量, 精度, 英語, 解答, 返答,

gistの埋め込みで盡く、デザインが崩れていた話。

2023.05.29

Logging

おはようございます、gistの埋め込みで盡く、デザインが崩れていた話です。いつからか分からないですが、gistの埋め込みを行っていた部分がすべて崩れていたので、先日の早朝に全ての崩れを直しました。

せっかく訪問してくださったのに、見栄えが崩れていてページの下部まで見ないと分からない状態になっていた事を陳謝します🙇。

極力デザインの崩れはないのかを確認しているのですが、デザインの崩れに気づかずに数ヶ月も放置していました。原因はおそらくワードプレスのバージョンアップによる影響かと思います。こういう仕様になったのか、それとも一時的なことなのか分からなかったのでプラグインに差し替えてプログラムコードを貼り付けています。

おそらくこちらの方が安全だと思うので、そういう形にしています。

タグ

gist, すべて, デザイン, バージョンアップ, プラグイン, プログラムコード, ページ, ワードプレス, 下部, 仕様, 全て, 原因, 形, 影響, 数ヶ月, 早朝, 状態, 見栄え, 話, 部分,

旅の栞：日帰り弾丸旅行でとんぼ返りです。 #7月の予定

2023.05.22

Logging

おはようございます、７月２２日に大阪へ旅行にいきます。高知空港で自分を見つけてもスルーでお願いします。声掛けてもらっても良いけど片言の日本語しか喋れないので会話が成り立たないと思います。そろそろ何処へ行くのか決めても良い時期なんだけどほぼ何も決まっていないです。

予約だけ取れた状態ですね・・・・。ここだけは行くという所が冨樫義博展です。その為、先日WEBから予約を行いました。

因みに他にも何処か良いところが有れば教えてください、そういうフォームを記事の下に設けました因みにこれプラグインです。全部の内容が本人に届くわけではありません。

タグ

web, スルー, フォーム, プラグイン, 予約, 会話, 何処, 何処か良いところ, 全部, 冨樫義博展, 声, 大阪, 所, 旅行, 日本語, 時期, 本人, 片言, 状態, 高知空港,

WP予約投稿ツイートプラグイン作り方。＃php言語 #code #v2

2022.10.11

Logging

おはようございます😤 お仕事に飢えてます…寒い季節ですね…。

さて、今日はWP予約投稿ツイートプラグイン作り方を記載していきます。ワードプレスでプラグインを作る場合はWordPressの下記の場所に任意のフォルダを作り、その中にディレクトリ名（任意名）と同じファイル名でphpファイルを作ります。※昔の名残なので今は命名が違っても動くかも知れませんが・・・。

cd /wp-content/plugins
mkdir mytweets
vi mytweets.php

そして、命名したファイル名を開き、ファイルの上部に下記のコメントを記載します。プラグイン名やプラグインの説明、プラグインバージョンをそれぞれ変更して頂き保存、その後サーバーサイドにアップロードします（フォルダごと）。

<?php
/*
Plugin Name: My tweets
Description: tweets
Version: 1.0
*/

これで何も動作しないプラグインが出来上がります。

後はコマンドラインからプラグインフォルダにcomposerをインストールしtwitteroauthのライブラリを入れます。

此処までが前手順です。此処までで挫折した人は結構いると思います🙄。

因みに此処までの事がすんなりと出来る人は、このブログの情報は必要ないものです。なのでココからはソースコードを記載します。WP予約投稿ツイートプラグインなんてオチャノコサイサイだと思います。

<?php
/*
Plugin Name: My tweets
Description: tweets
Version: 1.0
*/
if (!defined('ABSPATH')) exit;
require_once  "tw-v2-config.php";
require_once  "./vendor/autoload.php";

use Abraham\TwitterOAuth\TwitterOAuth;

function mytweets($new_status, $old_status, $post)
{
    
    if ($new_status == 'publish' && $old_status != 'publish') {
        try {
            $connection = new TwitterOAuth(APIKEY, APIKEYSECRET, ACCESSTOKEN, ACCESSTOKENSECRET);
            $connection->setApiVersion('2');
            $response = $connection->post('tweets', ['text' => get_the_title($post->ID) . "\n" . get_permalink($post->ID)], true);
        } catch (\Throwable $th) {
            //throw $th;
        }
    }
}
add_action('transition_post_status', 'mytweets', 10, 3);

上記のコードを記載した上で上書き保存＆アップロードします。その後ワードプレスの管理画面よりプラグインを有効にして出来上がり、今回はtwitteroauthのライブラリを使用しましたがcrulなどのを理解している人はライブラリは特に必要ないのかなとも思います。ライブラリを使用すればお手軽ですが、万が一何かあった時に困るのでライブラリを使用せずにコードを書くという方もいらっしゃると思います。

自分も極力、公式のライブラリしか使わないようにしています🙇。

トイウコデ、ワードプレスのプラグインの作り方でした。

タグ

2, cd, Code, description, lt, mkdir, My, mytweets, name, php, plugin, plugins, Tweets, Vers, vI, WordPress, wp, wp-content, アップロード, お仕事, コメント, サーバー, それぞれ, ツイート, ディレクトリ, バージョン, ファイル, フォルダ, プラグイン, プレス, ワード, 上部, 下記, 中, 予約, 今, 今日, 任意, 作り方, 保存, 名残, 命名, 場合, 場所, 変更, 季節, 後, 投稿, 昔, 言語, 記載, 説明,

WPのapply_filtersとadd_filterの説明が難解に書いているサイトが多い事に🤬。 #php #wordpress

2022.09.28

Logging

おはようございます、今月もそろそろ終わります🤔。

さて、来月から毎月一回しか投稿しなかったブログサイトを不定期更新に変更します。指針の変更にあたってブログデザインもデフォルトのテンプレートから無料のcocoonというテンプレートに変えました。

今までYOUTUBE動画URLを記載しているだけの投稿だったので、アイキャッチー画像等は無い状態でした。その為、テンプレートを変えるとノーイメージという画像が表示されるという事象が発生。これをプラグイン側で解決したかったのですが、独自の関数を多く使用しておりプラグイン側だけでは無理だということで、独自のアイキャッチー画像を処理しているコアの部分にapply_filtersを差し込み、プラグイン側でadd_filterで処理するという流れの対応を行いました。

apply_filtersというのはテンプレート側（他のプラグインでも可能）の関数の中に目印（付箋）を付けることが出来る機能（関数）です。
add_filterは目印（付箋）の部分の処理が走った時に、自分が作った処理を割り込ませることが出来る機能（関数）です。

※まずはカッコの中は読まずに理解してください😌。

巷では、これをややこしい例えで解説している所が多いのですが、それだけの話しです。今回、image-funcs.phpファイル（cocoon）の関数get_original_image_tagにapply_filtersを挿入し独自プラグインから呼び出して、ノーイメージの時にYOUTUBEのサムネイル画像を表示させるという事を行っていました。前、次ページのサムネイル画像は現在のページのサムネ画像が表示されるというバグはあるものの、ちゃんと跡のサムネ画像は変わっています。

サンプルコードを掲載します。ご参考程度に😌。

<?php
//オリジナルサムネイルタグの取得
if (!function_exists('get_original_image_tag')) :
  function get_original_image_tag($image_url, $width, $height, $class, $alt = null)
  {
    $html = '<img src="' . esc_url($image_url) . '" alt="' . esc_attr($alt) . '" class="' . esc_attr($class) . '" width="' . esc_attr($width) . '" height="' . esc_attr($height) . '" />';
    $html = convert_all_lazy_load_tag($html);
    $html = apply_filters("youtubeimage",$html);
    return $html;
  }
endif;

<?php
/*
Plugin Name: youtube image
Description: youtube image chg
Version: 1.0
*/
if (!defined('ABSPATH')) exit;
function youtubeimage_chg($imgurl){
    $url = null;
    if(preg_match("/(https:\/\/www\.youtube\.com\/watch\?v=[\-|_|a-zA-Z|0-9]{1,})/",get_the_content(),$matches)){
        $url = "https://img.youtube.com/vi/".preg_replace("/(https:\/\/www\.youtube\.com\/watch\?v=)/","",$matches[0])."/hqdefault.jpg";
        $url = preg_replace("/(src=\"https:\/\/.*no\-image\-[0-9]{2,3}\.png\")/","src=\"".$url."\"",$imgurl);
     }
     return $url?$url:$imgurl;
}

add_filter("youtubeimage","youtubeimage_chg");

余談：この対応はテンプレートが更新（アップデート）際にファイルが上書きされる可能性があります。その際にページが見えなくなるという問題を秘めています🙇。

タグ

Add, apply, cocoon, filter, filters, php, url, WordPress, wp, youtube, あい, イメージ, キャッチー, コア, こと, これ, サイト, デザイン, デフォルト, テンプレート, ノー, プラグイン, ブログ, 一, 不定期, 事, 事象, 今月, 使用, 処理, 動画, 変更, 多く, 対応, 投稿, 指針, 更新, 来月, 毎月, 為, 無料, 状態, 画像, 発生, 表示, 解決, 記載, 説明, 部分, 関数, 難解,

ページ無限スクロールの作り方 #インフィニティ#InfinityPageScroll #JavaScript

2022.09.22

Logging

おはようございます、台風１４号が過ぎ去ってからいきなり秋模様ですね🫠。

さて、先日ツイートしたページ無限ループが出来るJavaScriptコードを書きました。これを作ろうと思ったキッカケは、自分が運営しているWordPressサイトに巷のページ無限スクロールプラグインが尽く（ことごとく）使用出来なかったので自分で自作した訳です。因みにページ無限スクロールプラグインとはページを送りをしなくてもページの最下までスクロールすると次頁を読み込んでくれるプラグインの事を指します。

下記のコードは自サイト専用なのでそのまま使用することは出来ませんが、重要な部分だけ抜き取って再利用すれば、独自のページ無限ループに対応することは可能かと思います。

コードを読んで頂ければ分かることですが、重要なポイントはページを読み込む方法とそれをDomに変換する方法だと思います。まず、ページを読み込む方法は下記のファンクションで可能です。

fetch(next_url).then(
                response => response.text()
            ).then(data => {

そしてDomに置き換えている所はこの部分になります。これら２つの箇所が重要になります。

                const parser = new DOMParser();
                const doc = parser.parseFromString(data, 'text/html');

これらの事に注意して独自コードを書いてみてください。最後に全コードを記載しときます。

let cnt = 2;
let blk = 0;
async function nextpage() {
    if (cnt !== blk) {
        blk = cnt;
        await (async () => {
            let next_url = "https://fox-black.com/blog/page/" + cnt;
            return await fetch(next_url).then(
                response => response.text()
            ).then(data => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(data, 'text/html');
                let blogs = doc.querySelectorAll('.blogpage');
                cnt++;
                if (blogs[0].innerHTML !== undefined) {
                    document.querySelector(".foxpage").insertAdjacentHTML("beforeend", (function (elm) {
                        let str = "";
                        for (const key in elm) {
                            const element = elm[key];
                            if (element.innerHTML !== undefined) {
                                str += "<div class=\"blogpage\">" + element.innerHTML + "</div>";
                            }
                        }
                        return str;
                    })(blogs));
                } else {
                    if (document.querySelector("#fin") === null) {
                        document.querySelector(".foxpage").insertAdjacentHTML("beforeend", "<div id=\"fin\"></div>");
                    }
                }
            }).catch(error => {
                if (document.querySelector("#fin") === null) {
                    document.querySelector(".foxpage").insertAdjacentHTML("beforeend", "<div id=\"fin\"></div>");
                }
            });
        })();
    }
}

if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
    window.addEventListener("scroll", async function () {
        let s = (() => {
            let tgt;
            if ('scrollingElement' in document) {
                tgt = document.scrollingElement;
            } else if (this.browser.isWebKit) {
                tgt = document.body;
            } else {
                tgt = document.documentElement;
            }
            return tgt;
        })();
        if (document.querySelector("#fin") === null && s.scrollTop >= (s.clientHeight - 650)) {
            await nextpage();
        }
    });
} else {
    document.querySelector(".foxpage").addEventListener("scroll", async function () {
        if (document.querySelector("#fin") === null && document.querySelector(".foxpage").scrollTop >= (document.querySelector(".foxpage").scrollHeight - 300)) {
            await nextpage();
        }
    });
}

タグ

14, dom, InfinityPageScroll, javascript, WordPress, インフィニティ, キッカケ, コード, こと, これ, サイト, スクロール, それ, ツイート, プラグイン, ページ, ポイント, ループ, 下記, 事, 作り方, 使用, 先日, 利用, 可能, 台風, 変換, 対応, 専用, 巷, 方法, 最下, 模様, 次頁, 無限, 秋, 自, 自作, 自分, 訳, 運営, 部分, 重要,

キャンプや個展は気兼ねなく行けるものなのかも？

2022.08.22

Logging

おはようございます。月曜日の朝ですね、今日から一日のスケージュールを作って活動します。

さて、キャンプや個展などは、コロナ禍であっても気兼ねなく行ける場所なのかもしれないな。キャンプは外だし、個展は基本的に喋ることが無い空間ですからね。そういう意味で今、再過熱していそうです。秋には個展や美術、展示会など見に行きたいイベントがありますが、どれも県外なので難しいです😭。

話変わって、自分はいまWordPressの過去記事をブロック形式に一括変更できないのか、模索しています。一括変更できるプラグインは恐らく今の段階では作れそうにないです。何故なら公式が提供してくれている記事をブロック変換する物はJavaScriptで変換している。逆から言えば表示される前のデーターを変更するよりもJavaScriptで変換した方がベストと公式サイトのエンジニアが恐らく考えたという事なので、プラグインで作るのは至難の業なのかもしれない。

なので、今回考えたのはSeleniumを使用して解決する方法です。これならそれ程時間もかからず開発できるので、こちらで対応します。尚、出来上がったものを提供するかは今の段階では考えていません。

タグ

javascript, WordPress, イベント, いま, エンジニア, キャンプ, こと, コロナ, サイト, スケージュール, データー, どれ, プラグイン, ブロック, ベスト, もの, 一, 一括, 事, 今, 今日, 個展, 公式, 前, 場所, 変換, 変更, 外, 展示会, 形式, 意味, 提供, 方, 月曜日, 朝, 業, 模索, 段階, 気兼ね, 活動, 物, 県外, 禍, 秋, 空間, 美術, 自分, 至難, 表示, 記事, 逆, 過去, 過熱,

新着記事が表示されるWPの非公式プラグインを作りました。

2022.07.24

Logging

こんにちは、朝の2時に起床し４時頃、ウォーキング。そして朝食後、コードを書いてその後、仮眠をとって今、記事を書いています。かなり不規則な生活リズムです😩、今日からは元の生活リズムへ戻そうと思っています。さて、WordPressの非公式プラグインを自前で制作致しましたのでお裾分けです。

今回はシングルページの記事の下に新着記事が表示されてカルーセルで動くというプラグインです。

アイキャッチ画像の大きさなどはご自身でソースコードを変更してご使用ください。尚、アイキャッチ画像がないには対応しておりません。

いらないパラメーターを投げている所があります。そちらは御自身で修正をお願いします、因みに今は新着記事５記事を取得している感じです、そちらも変更はソースコードを修正してお使いいただければと思っています。

ダウンロードのURLは下記になります。

https://zip358.com/plugin/new-post.zip

追伸：カールセルUIはSlickを使用しております。

タグ

2, 358, 4, 5, com, https, plu, url, WordPress, wp, www, zip, あい, ウォーキング, お使い, お裾分け, お願い, かなり, カルーセル, キャッチ, コード, ご自身, シングル, ソース, そちら, ダウンロード, パラメーター, プラグイン, ページ, リズム, 下, 下記, 不規則, 今, 今回, 今日, 仮眠, 使用, 修正, 元, 公式, 制作, 取得, 変更, 対応, 後, 感じ, 所, 新着, 朝, 朝食, 生活, 画像, 自前, 自身, 表示, 記事, 起床,

JavaScriptのdocumentがドキュメントな訳。

2022.06.07

Logging

おはようございます。そろそろ梅雨入りなのかもなって。

さて、タイトル通りドキュメントな訳を知りたい方もいると思います、自分も何故、document（資料）なのかなって数秒間考えた結果、インターネットやHTMLの歴史を調べれば分かると思いますが、もともと研究者同士の情報交換（資料共有）に使用されていたのがモノがあるきっかけで注目を浴びた結果、今日では世界中で使用されるようになったのだと考えるとdocumentの意味がわかる。

因みにJavaScript（JS）はプログラミング学習、初学者には最適な言語だと思います、何故ならブラウザの開けるパソコンが一台有れば学習できる言語だからです。尚、JavaScriptを学んでVue.jsなどのフレームワークを学ぶのが定石だと思います。JavaScriptで独自プラグインを作ることが出来ればフレームワークの勉強に進んでも挫折しないと思います。

タグ

document, html, javascript, JS, vue, インターネット, きっかけ, こと, タイトル, ドキュメント, パソコン, ブラウザ, プラグイン, フレームワーク, プログラミング, もの, 一, 世界, 交換, 今日, 使用, 共有, 初学者, 勉強, 同士, 学習, 定石, 情報, 意味, 挫折, 数秒, 方, 最適, 梅雨入り, 歴史, 注目, 研究者, 結果, 自分, 言語, 訳, 資料,

All in ONE SEOはヘッダーをゴニョゴニョしてくれるだな😌

2022.03.16

Logging

All in ONE SEOはヘッダーをゴニョゴニョしてくれるだな😌という事で自分でヘッダー部分にタイトルやソーシャル用のタグを基準する必要ないのです。

因みに個別記事に関連記事が入っているとそれがタイトル名になる場合がありますので、そこらへん関連記事の構造を意識する必要があります。その事を知らなかったので一時タイトル名が違ったタイトル名が表示されていました。

SEO的にどれぐらい効果があるかは不明ですが、ワードプレスで開発するときにAll in ONE SEO入れておくと勝手にそこらへん記述がコードに挿しこむ事が出来るので結構便利かと思います。

ただ、プラグインですからね、無名なプラグインを使っていると痛い目にあう事もあるので注意が必要です。もし無名なプラグインで良いのがあったら似たような動作で自作プラグインを作ったほうがマシです。何もかも人様のプラグインを使っていると後々のメンテナンスで痛い目にあいますし、下手をするとプラグインとともに共倒れって事さえありますので、プラグイン導入は慎重にした方が良いです。

特に企業サイトの運営にむやみにプラグイン導入は間違いなく害悪です。

タグ

all, in, one, SEO, コード, ゴニョゴニョ, ソーシャル, そこら, それ, タイトル, タグ, とき, どれぐらい, プラグイン, プレス, ヘッダー, べん, まし, メンテナンス, ワード, 一, 不明, 事, 人様, 何もかも, 便利, 個別, 効果, 動作, 勝手, 基準, 場合, 後々, 必要, 意識, 構造, 注意, 無名, 的, 目, 自作, 自分, 表示, 記事, 記述, 部分, 開発, 関連,

WordPressのapply_filtersを使うと便利ですよ。

2021.11.29

Logging

明日（2021/11/30）は高知県は雨が降るそうです、冬の雨はあまり自分は好きではないです・・・。どんより曇り空よりかはマシですけどね。

さて「WordPressのapply_filtersを使うと便利ですよ。」というお話です、有名なプラグインにはapply_filtersが大体あるので、それを使ってプラグインに自分のオリジナル処理を割り込むことが可能です。では、 apply_filtersはどんな動作をするかと言えば、独自のフィルターを登録するときに使用します。

なので、add_actionを使って登録されている独自のフィルター名を参照することで外部のプラグインに変更処理を行うこと等が可能になります。

<?php apply_filters( $tag, $value, $var ... ); ?> 

<?php add_action( $hook, $function_to_add, $priority, $accepted_args ); ?>

apply_filtersとadd_filterがどういう物なのかを完結に説明しているサイトが有りましたので、リンクを記載しときます。

https://blog.z0i.net/2016/11/apply-filters-add-filter.html

余談：ある有名なプラグインのコードを読んでいて、自分がプラグインを作るときにもapply_filtersなどを記載しておくと開発者に使用していただける確率は高くなるなと感じました。

タグ

11, 2021, 30, Action, Add, apply, filters, function, gt, hook, lt, php, tag, To, value, var, WordPress, オリジナル, お話, こと, それ, とき, フィルター, プラグイン, まし, 使用, 便利, 冬, 処理, 動作, 参照, 可能, 変更, 外部, 明日, 曇り空, 有名, 登録, 自分, 雨, 高知県,

らくてんのアフィリエイトを記事の下に取り付けるプラグインを作りました。

2021.11.02

Logging

らくてんの アフィリエイト を記事の下に取り付けるプラグインを作りました。Composerを使用して楽天のSDKを取ってきているので、そちらをプラグインの中にインストールする必要と アフィリエイト のAPIIDなども必要になりますのでそちらも御自身で構える必要がありますが、それ程難しいことはないプログラムコードだと思います。

あとCSSなどもご自身が使用するサイトのデザインに合わしてご使用ください。今回、WordPressのプラグインですがソースコードを見たいだければ分かる通り、AmzのSDKも取り入れようかなとか思ったのですが、処理が重たくなり表示速度が下がりそうだったので辞めました。因みにAmzのSDKはComposerに公開していないようです。公式サイトからzipでダウンロードするか、githubから入手する方法しかないようですね。

仕様として、タグのワードから商品を検索し表示する方法とショートカットを使用して商品を表示させる方法があります。例えばRakuten_Seller_param type=”search” word=”ひろゆきのシン・未来予測”このようにショートコード書くと下記のように表示されます。また記事の最後に自動で紹介商品も表示されます。

追記：リクエストが多くなるとバグるみたいな‥‥。いまいち下記が表示されていない原因がわからない。

追記：記事の最後に自動で紹介する機能は、このサイトでは一旦停止しています。

[Rakuten_Seller_param type=”search” word=”ひろゆきのシン・未来予測”]

トイウコトデ、WordPressのソースコードになります。

<?php
/*
Plugin Name: Rakuten_Seller
Plugin URI: https://zip358.com/
Description: 楽天アフィリエイトを表示
Author: @zip358com
Version: 0.1
Author URI: https://zip358.com/
*/
require_once plugin_dir_path( __FILE__ ).'/vendor/autoload.php';
define("RAKUTEN_YOUR_APPLICATION_ID","xxxxxxxxxxxxxxx");
define("RAKUTEN_YOUR_AFFILIATE_ID","xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");

define("AMAZON_YOUR_ACCESS_KEY_ID","");
define("AMAZON_YOUR_SECRET_KEY","");
define("AMAZON_YOUR_ENDPOINT","");
define("AMAZON_YOUR_URL","");


function Rakuten_Seller_content_plus($content) {
    if(is_single()) {
       $content.='［Rakuten_Seller_param type="auto"］';
    }
    return $content;
}

function Rakuten_Seller($params = array()){
     $htmlcode = "";
    extract(shortcode_atts(array(
        'type'=>'',
        'word'=>''
    ), $params));
    $client = new RakutenRws_Client();
    // アプリID (デベロッパーID) をセットします
    $client->setApplicationId(RAKUTEN_YOUR_APPLICATION_ID);
     
    // アフィリエイトID をセットします(任意)
    $client->setAffiliateId(RAKUTEN_YOUR_AFFILIATE_ID);

    if($type==="auto"){
        $tags = get_the_tags();
        $htmlcode.= "<div class='rakuten_seller_div'>";
        foreach( $tags as $tag) { 
            $htmlcode.= Rakuten_code($client,$tag->name);
        }        
        $htmlcode.= "</div>";
        
    }elseif($type==="search"){
        $htmlcode.= "<div class='rakuten_seller_div'>";
        $htmlcode.= Rakuten_code($client,$word);
        $htmlcode.= "</div>";
    }

    return $htmlcode;
 }

function Rakuten_code($client,$word="JavaScript"){
    $htmlcode = "";
   
    // IchibaItem/Search API から、keyword=$word を検索します
    $response = $client->execute('IchibaItemSearch', array(
      'keyword' => $word,
      'genreInformationFlag' => 1
    ));
    // レスポンスが正しいかを isOk() で確認することができます
    $cnt = 0;
    if ($response->isOk()) {
        foreach ($response as $item) {
           $htmlcode.= "<div class='rakuten_seller_item'>".
           "<img src='".$item["mediumImageUrls"][0]["imageUrl"]."'>".
           "<p>".$item["itemName"]."</p>".
           "<a class='rakuten_btn' href='".$item["affiliateUrl"] . "' title='".$item["itemName"]."'><span>楽天で購入"."</span></a></div>";
           $htmlcode.= amazon_code($item["isbn"],$item["jan"]);
           if($cnt>0){
                break;
           }
           $cnt++;
        }

    } else {
        //echo 'Error:'.$response->getMessage();
    }
    return $htmlcode;
}

function amazon_code($isbn="",$jan=""){
    $htmlcode = "";

    return $htmlcode;
}


add_shortcode('Rakuten_Seller_param', 'Rakuten_Seller');
add_filter('the_content', 'Rakuten_Seller_content_plus');

タグ

Amz, APIID, Composer, css, github, SDK, WordPress, zip, あと, アフィリエイト, インストール, コード, こと, ご自身, サイト, ショート, ソース, そちら, ダウンロード, タグ, デザイン, プラグイン, プログラム, らくてん, ワード, 下, 中, 今回, 仕様, 使用, 入手, 公式, 公開, 処理, 商品, 必要, 方法, 検索, 楽天, 自身, 表示, 記事, 通り, 速度,

Nginxよりも爆速なLiteSpeedを使ってみたいなと思っている。

2021.09.05

Logging

Nginxよりも爆速なLiteSpeedを使ってみたいなと思っている。LiteSpeedはApacheとも互換性があって情報を引き継ぎやすいと言われています。なのでWEBサーバーとしては最適なソフトウェアだと思います。但し無料枠ではすべての互換しないみたいです。すべての機能を使い倒したい場合は有償版をやはり購入しないといけない。どれぐらい爆速かを知りたい場合はロリポップが提供しているLiteSpeedで体感してみるのが良いかもしれない。

自分はVPSサーバーにOpenLiteSpeed（無償版）を入れてみようと思います。さくらレンタルサーバーでブログなどを運用しているのだけど、それをVPSサーバーに移行しようと思っています。

タイミングを見て切り替えを行いたいのですが、今の所、さくらレンタルサーバーで運用します。尚、 LiteSpeedが提供しているWordPressのプラグインがありそれをインストールすることによりLiteSpeedの性能を引き出すことが可能だとか。

さくらレンタルサーバーもLiteSpeedを使用するようになれば良いのだけど当分は無理そうな気がします。自分みたいに大量の記事データーを保有している人はLiteSpeedサーバーに移管することも考えてみても良いかもしれないですよ。

何せ、ページの読み込みが遅いと離脱してしまう可能性を高めていると言われていますから。

タグ

Apache, LiteSpeed, nginx, OpenLiteSpeed, VPS, web, WordPress, サーバー, さくら, すべて, ソフトウェア, それ, タイミング, どれぐらい, プラグイン, ブログ, レンタル, ロリポップ, 互換, 互換性, 今, 体感, 場合, 情報, 所, 提供, 最適, 有償, 枠, 機能, 無償, 無料, 爆速, 移行, 自分, 購入, 運用,