掲示板

「JetTheme」テンプレート（テーマ）

2022/09/23 14:30

無料版（Core）と有料版（Newspaper）がありますが、管理人一押しのテンプレートです。
「QooQ」テンプレートはカスタマイズが進むと表示が遅くなりがちですが、「JetTheme」は難しい対策をしなくても高速表示されます。
　インドネシアの「Nov」さんが作成されたテーマのため、『Google翻訳』でインドネシア語から翻訳ください。

サークルに参加すると投稿することができます

サークルに参加する

15 アタル
2023/01/22 17:41
返信
リモさんが以下の記事で『ファーストビューのみ、画像遅延読み込みを外す方法』を紹介‼️
https://www.limosuki.com/2022/05/jettheme-featuredpost.html

有料版も同様で、該当箇所の「imgタグ」を修正…

<img expr:alt='data:post.title' expr:class='data:post.featuredImage.isYoutube ? "object-cover lazyload" : "lazyload"'
expr:data-src='data:post.featuredImage.isYoutube ? data:post.featuredImage.youtubeMaxResDefaultUrl : data:post.featuredImage' loading='lazy'
src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
/>

遅延読み込み時の（画像）URLは「data-src=」で指定し、「src=」は遅延読み込みが完了されるまでダミー表示される画像を指定（上記では表示負荷を減らすため、base64エンコードでテキスト化したダミー画像を指定）

<img expr:alt='data:post.title' expr:class='data:post.featuredImage.isYoutube ? "object-cover" : ""'
expr:src='data:post.featuredImage.isYoutube ? data:post.featuredImage.youtubeMaxResDefaultUrl : data:post.featuredImage'
/>

リモさんのブログ記事のように「YouTubeのURL」を貼る箇所で無ければ、以下で大丈夫です❗️
<img expr:alt='data:post.title' expr:src='data:post.featuredImage'/>
16 アタル
2023/01/22 17:51
返信
>>15

投稿すると、行先頭のスペース（半角の空白）文字が　削除されてしまいます😢
行先頭の『expr:』や『src=』の前に、スペース（半角の空白）文字を補ってくださいませ。

（注）なお、見やすいように改行していますが、改行は　必要ありません
17 アタル
2023/01/26 13:59
返信
「defer.js」最新バージョンの適用方法

JetTheme Ver.1.9 には無料版と有料版ともに遅延読み込み用JS「defer.js@2.5.0」がインライン組み込まれていますが、2023/01/26現在「defer.js@3.4.0」が最新です。

GitHub の defer.min.js と（バックアップ後の）XMLファイル内の該当部分を入れ替えます‼️
https://github.com/shinsenter/defer.js/blob/main/dist/defer.min.js

/*@shinsenter/defer.js@2.5.0*/　で検索後、その行から　(this,document,setTimeout);　までを上記のテキストコードと入れ替えて、保存するだけ❗️

/*!@shinsenter/defer.js@3.4.0*/
（省略）
(this);

今後の入れ替えのため、　(this);　後で改行しておくと良いでしょう

なお、その後の　'IntersectionObserver'in window||document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"><\/script>');　の1行は、IEを含む「IntersectionObserver」API非対応のブラウザのみ実行されます。
（　<\/script>　の　\　は　Windows環境以外にコピーすると、バックスラッシュで表示されます　）

【注意】　!(function(n){　（省略）　})(this);　先頭の『 !　エクスクラメーションマーク』は即時関数化のために必要です。
削除してはいけません‼️
18 アタル
2023/01/29 15:33
返信
Defer.js（Defer.dom）検証サンプル‼️

function jtCallback()

内部（　/*Your Script is here to maintain performance.*/　行の後）に以下を追加

//該当クラスを検索し、要素の配列を取得
const prismEmbed = document.getElementsByClassName('line-numbers'); //Prism.jsで行番号を付与するclass
const tw_EmbedTW = document.getElementsByClassName('twitter-tweet'); //Twitter-Tweet埋込で自動付与のclass
const tw_EmbedTL = document.getElementsByClassName('twitter-timeline'); //Twitter-TimeLine 埋込で自動付与のclass

（次コメントへ、続く）
19 アタル
2023/01/29 15:42
返信
try {

if (prismEmbed.length !== 0) {
Defer.css('https://〜/prism.css', 'prism-css', 700);
Defer.js('https://〜/prism.js', 'prism-js', 700, function() {
Defer.dom('pre code', 100, 'scroll-loaded-prism', Prism.highlightElement, {rootMargin: "120%"});
//console.info(document.getElementsByTagName('code')); //debug
});
}

if (tw_EmbedTW.length !== 0 || tw_EmbedTL.length !== 0) {
Defer.js('https://platform.twitter.com/widgets.js', 'twitter-js', 700, function() {
Defer.dom('blockquote.twitter-tweet', 100, 'scroll-loaded-tw', twttr.widgets.load, {rootMargin: "120%"});
Defer.dom('a.twitter-timeline', 100, 'scroll-loaded-tl', twttr.widgets.load, {rootMargin: "120%"});
//console.info(document.getElementsByClassName('twitter-tweet')); //debug
//console.info(document.getElementsByClassName('twitter-timeline')); //debug
});
}

} catch (error) {
console.log(error);
}

//なお、今回は　行が多くなるため、Instagram と TikTok 対応のコード（Defer.dom非利用）は省略
//TwitterとInstagram、元のblockquote(a)タグがJS実行後無くなります😢
20 アタル
2023/01/29 15:52
返信
クリックで拡大
Prism.js は、pre code タグがそのまま残るので、検証は簡単です！

以下は「HTML表示例」までスクロールしたサンプルですが、その下の「CSS表示例」まで先読みされています。
{rootMargin: "120%"}　が有効に作用しているという事ですね。
21 アタル
2023/01/29 16:18
返信
クリックで拡大
JS実行（展開）後、Twitter と Instagram の場合「blockquote タグ（Twitterタイムラインは、a タグ）」が無くなってしまうので、検証するタイミングは難しいですね。（添付のスクショ、撮るのに苦労しました）

Twitter は div タグ、Instagram は（たぶん） iframe タグに　元々埋め込みコード内に付与されているクラスが付与されます！
TikTok は埋め込み表示自体は問題ありませんが、Safariブラウザのコンソールでエラーが出るため、深く検証せず…

Instagram をページ内にたくさん埋め込む方、ぜひ Derfer.dom 利用のコードを検証してみてくださいね‼️
22 アタル
2023/01/29 16:40
返信
JS（CSS）ファイルの先読み方法

Defer.js 作者の Shinさん（Twitter @shinsenter ）さんに、『JS（CSS）ファイルのプリロード』方法を教えて頂きました‼️

<head>タグにプリロードを追加しておくことで、外部のリソース（JSやCSSファイルなど）を事前に読み込んでおくことができます。
イメージ的にはキャッシュに置いておくだけで実行はされませんので Google PSI 値は悪くならず、逆に良くなるようです。

「Prism.js 利用者向けのサンプル」


行のあとに追加する


<link as='style' href='https://〜/css/prism.css' rel='preload'/>
<link as='script' href='https://〜/js/prism.js' rel='preload'/>

ぜひ、お試しください‼️
23 アタル
2023/01/29 16:49
返信
>>22

頻繁に利用する、 Twitter など大きめの JSファイルやCSSファイルを先読みしておくと、効果があるはずです‼️
24 あトん
2023/01/29 21:35
返信
>>19
アタルさん、検証されたJavaScriptの解説ありがとうございます。
25 アタル
2023/01/30 03:05
返信
Instagram　Defer.js（Defer.dom）サンプルコード‼️
Instagram の関数名も判明したので、追加でUPしておきます‼️

//（省略）

const instaEmbed = document.getElementsByClassName('instagram-media'); //Instagram埋込コードで付与されるクラス

//（省略）

if (instaEmbed.length !== 0) {
Defer.js('https://www.instagram.com/embed.js', 'insta-js', 1000, function() {
Defer.dom('blockquote.instagram-media', 100, 'scroll-loaded-insta', instgrm.Embeds.process, {rootMargin: "120%"});
//console.info(document.getElementsByClassName('instagram-media')); //debug
});
}

//（省略）
26 アタル
2023/01/30 16:43
返信
>>18

Defer.js（Defer.dom）コード‼️　【最新版】

function jtCallback()

内部（　/*Your Script is here to maintain performance.*/　行の後）に以下を追加

//該当クラスを検索し、要素の配列を取得
const prismEmbed = document.getElementsByClassName('line-numbers'); //Prism.jsで行番号を付与するためのclass
const tw_EmbedTW = document.getElementsByClassName('twitter-tweet'); //Twitter-Tweet埋込で自動付与のclass
const tw_EmbedTL = document.getElementsByClassName('twitter-timeline'); //Twitter-TimeLine埋込で自動付与のclass
const instaEmbed = document.getElementsByClassName('instagram-media'); // Instagram埋込で自動付与のclass
const tiktokEmbed = document.getElementsByClassName('tiktok-embed'); // TikTok埋込で自動付与のclass

（次コメントへ、続く）
27 アタル
2023/01/30 16:50
返信
>>19

【最新版】（Twitter&Instgramは元タグが削除される→追加指定クラスを null に変更）

try {

if (prismEmbed.length !== 0) {
//変更ないため、No.19参照
}

if (tw_EmbedTW.length !== 0 || tw_EmbedTL.length !== 0) {
Defer.js('https://platform.twitter.com/widgets.js', 'twitter-js', 700, function() {
Defer.dom('blockquote.twitter-tweet', 100, null, twttr.widgets.load, {rootMargin: "120%"});
Defer.dom('a.twitter-timeline', 100, null, twttr.widgets.load, {rootMargin: "120%"});
});
}

if (instaEmbed.length !== 0) {
Defer.js('https://www.instagram.com/embed.js', 'insta-js', 1000, function() {
Defer.dom('blockquote.instagram-media', 100, null, instgrm.Embeds.process, {rootMargin: "120%"});
});
}

if (tiktokEmbed.length !== 0) Defer.js('https://www.tiktok.com/embed.js', 'tiktok-js', 1000);

} catch (error) {
console.log(error);
}
28 アタル
2023/02/04 19:50
返信
クリックで拡大
現在 JetTheme にインライン組み込みされているのは「defer.js@2.5.0」ですが、
『Defer.dom関数のカスタマイズ』が判明。

画像は diff ツールで、差分を表示したもの‼️

左側：defer.js@2.5.0　オリジナル版
右側：defer.js@2.5.0　JetTheme版

Defer.dom関数に、引数「z」が追加され、
元々5個の引数が6個になっています
29 アタル
2023/02/04 20:05
返信
クリックで拡大
GoogleBlogger用ブログテンプレート（テーマ）の「JetTheme」では、defer.js@2.5.0をカスタマイズ後にインライン組込（Defer.dom関数に、引数1つ追加）

JetThemeで最新版のDefer.jsを利用するには、カスタマイズが必要です😢
➡️JetTheme対応の『defer.js@3.4.0』コードをUPしましたので、ご利用くださいませ‼️
　https://past.gadgets-geek.net/js/wito_jt_defer340min.js
JSコードの著作権は、Shinさん（ Twitter @shinsenter ）の物です。

ファイルのまま組み込んでもかまいませんが、インライン組み込みの方が速度の点でオススメですね。
引数6個のJetTheme専用「Defer.dom」関数は互換性維持のため、そのままの名前で❗️
Defer.js@3.4.0オリジナル版「Defer.dom」関数（引数5個）を利用したい場合は、「Defer.dom2」‼️関数をご利用ください。
30 アタル
2023/02/04 20:16
返信
>>29

コードサンプル

const prismEmbed = document.querySelectorAll('[class*="language-"]');// Prism.js ( クラス language- 部分一致 )

if (prismEmbed.length !== 0) {
Defer.css('https://past.gadgets-geek.net/css/prism.css', 'prism-css', 700);
Defer.js('https://past.gadgets-geek.net/js/prism.js', 'prism-js', 700, function() {
Defer.dom2('pre code', 100, 'scroll-loaded-prism', Prism.highlightElement, {rootMargin: "120%"});
// console.info(document.getElementsByTagName('code')); // debug
});
}
31 アタル
2023/02/15 03:41
返信
function jtCallback()内で、"投稿" か "ページ" 以外「以降の処理を行わず関数を終了」
させる場合は、以下のように記述します！

try {
const ele_body = document.getElementsByTagName('body')[0]; //bodyタグは1つだけ

if ( ele_body.classList.contains('is-single') || ele_body.classList.contains('is-page') ) {
; //空文（何もしない、ダミー文）
} else {
return; //この関数を終了
}

} catch (error) {
console.log(error);
}

（注）　<body>タグに追加されるCSSクラスで、「ページ種別」を判別可能です。
投稿（is-single）、ページ（is-page）、投稿一覧（is-home）、検索（is-search）、アーカイブ（is-archive）
32 アタル
2023/02/15 03:53
返信
>>31

JavaScript ではなく、XML記述での　投稿、投稿一覧、ページ、アーカイブ、サーチなどの判別方法

（注）フランス語の記事ですが、日本語に翻訳して　いつも利用しています。
https://bloggercode-blogconnexion.blogspot.com/1978/10/data-view-isPost.html
を、参照ください！
33 アタル
2023/02/22 14:47
返信
クリックで拡大
>>29

Defer.js Version: 3.5.0 が 2023/02/21 リリースされました‼️

GoogleBlogger用ブログテンプレート（テーマ）の「JetTheme」では、defer.js@2.5.0をカスタマイズ後にインライン組込（Defer.dom関数に、引数1つ追加）

JetThemeで最新版のDefer.jsを利用するには、カスタマイズが必要です😢
➡️JetTheme対応の『defer.js@3.5.0』コードをUPしましたので、ご利用くださいませ‼️
　https://past.gadgets-geek.net/js/wito_jt_defer350min.js
JSコードの著作権は、Shinさん（ Twitter @shinsenter ）の物です。

ファイルのまま組み込んでもかまいませんが、インライン組み込みの方が速度の点でオススメですね。
引数6個のJetTheme専用「Defer.dom」関数は互換性維持のため、そのままの名前で残します❗️
Defer.js@3.5.0オリジナル版「Defer.dom」関数（引数5個）を利用したい場合は、「Defer.dom2」‼️関数をご利用ください。

（例）
Defer.css('https://〜/prism.css', 'prism-css', 700);
Defer.js('https://〜/prism.js', 'prism-js', 700, function() {
Defer.dom2('pre code', 100, 'scroll-loaded-prism', Prism.highlightElement, {rootMargin: "120%"});
});

以上です。
34 アタル
2023/02/25 15:14
返信
>>33

動的生成要素に対応するため、CSSセレクタを変更‼️
ツイート埋込数が少なければ、Defer.dom2の遅延時間1000msは500msとか⁉️

if (prismEmbed.length !== 0) {
window.Prism = window.Prism || {};
Prism.manual = true;
Defer.css('https://past.gadgets-geek.net/css/prism.css', 'prism-css', 700);
Defer.js('https://past.gadgets-geek.net/js/prism129.js', 'prism-js', 700, function() {
Defer.dom2('pre code', 100, null, Prism.highlightElement, {rootMargin: "120%"});
});
}

if (tw_EmbedTW.length !== 0 || tw_EmbedTL.length !== 0) {
Defer.js('https://platform.twitter.com/widgets.js', 'twitter-js', 700, function() {
Defer.dom2('.twitter-tweet, .twitter-timeline', 1000, null, twttr.widgets.load, {rootMargin: "120%"});
});//遅延時間
}

if (instaEmbed.length !== 0) {
Defer.js('https://www.instagram.com/embed.js', 'insta-js', 1000, function() {
Defer.dom2('.instagram-media', 100, null, instgrm.Embeds.process, {rootMargin: "120%"});
});
}

if (tiktokEmbed.length !== 0) Defer.js('https://www.tiktok.com/embed.js', 'tiktok-js', 1000);