新ぴたぶろぐ
自分が書きたいことを書くだけのブログ
≡
検索
AND検索
OR検索
↑
プロフィール
Pitan
プログラミングや音MADやらが趣味
↑
最新のページ
最新の5件
2024-06-26
【アセンブリ言語】C言語コンパイルしてアセンブリ言語を解読していく
2024-05-29
PHPのチートシート
2024-05-14
WikiChree.COMの管理者の妄想？
2024-05-08
Visual Basicを使ってみた感想
2024-04-25
PHPってもう時代遅れ？それでも私がPHPを使い続ける理由
[
もっと見る
]
↑
タグ
ゲーム
サービス
プログラミング
情報技術
通信技術
[
もっと見る
]
↑
人気のページ
人気の5件
FrontPage
(29734)
RecentUpdates
(848)
【Discord】強力なスパム対策ができるボット「Wick」を紹介します。
(489)
【Minecraft】 FabricとForgeどっちがいいのだろうか？
(478)
無料のWikiソフトウェアを比較してみる
(199)
↑
カウンター
合計:
0
今日:
0
昨日:
0
オンライン:
18
トップ
ヘルプ
PukiWiki
【WordPress】GitHub Pagesを利用して静的化したWordPressをほぼ無料で公開する をテンプレートにして作成
開始行:
#include(include/oldblog,notitle)
&ref(https://wikichree.com/pitablog/thumbnail/E38090576F7...
* 【WordPress】GitHub Pagesを利用して静的化したWordPress...
//#seo(description,テンプレ)
//#seo(keywords,テンプレ)
#splitbody{{
LEFT:
&tag(情報技術,Git,GitHub,JavaScript,PHP,WordPress,サーバ...
#split
RIGHT:&size(13){投稿日: 2022-07-20 (水)};
}}
#bcontents
元々、このブログ以前のブログはレンタルサーバーで動かして...
あまり更新しなかったため、必要性はないと感じ、新たにWordP...
この２日間かけて、ようやく少し使えるような形になりました。
今回は、WordPressプラグインである、Simply Staticを使って...
Cocoonテーマを利用しているので少し変わるかもしれません。
私はWordPressに関しては完全に素人なので申し訳ないです。
目次
+ [[手順>https://blog.pitan76.net/2022072049/#toc1" tabin...
+ [[Simply Staticの導入>https://blog.pitan76.net/20220720...
+ [[GitHub の設定>https://blog.pitan76.net/2022072049/#to...
+ [[おまけ>https://blog.pitan76.net/2022072049/#toc4" tab...
++ [[検索を機能させる>https://blog.pitan76.net/2022072049...
++ [[コメントを機能させる>https://blog.pitan76.net/202207...
+
* 手順 [#a5d2d2db]
簡単にまとめておきます。
+
++ Simply Staticを導入する
++ 適当にSimply Static用のフォルダをつくる (つくったフォ...
++ WPの管理メニューのSimply Staticのページから静的ファイ...
++ simplystatic/をGitリポジトリにする (simplystatic下で以...
git init
git add *
git commit -m "first"
git remote add origin https://github.com/(ユーザー名)/(...
git push origin main
++
++ [[conv_for_simply.rb>https://www.lotusdigital.jp/b/web...
++ WordPressのルートにbatファイル(push.bat)をつくる
cd ./simplystatic/
ruby conv_for_simply.rb
git add *
git commit -m "update"
git push
++
++ batファイルを実行する
++ GitHub Pagesの設定をする
+
* Simply Staticの導入 [#q4fdc5ac]
&ref(https://blog.pitan76.net/wp-content/uploads/2022/07/...
※インストール後、必ず有効化しておきましょう。
こちらのプラグインは静的化するためのプラグインです。
静的化とは静的ファイルであるHTML、JS、CSS、画像など簡単に...
つまり、PHPが生成したソースをHTMLファイルとして保存します。
適当にSimply Static用のフォルダをつくります。つくったフォ...
正しく導入できれば、WordPressの管理メニューのサイドバーに...
&ref(https://blog.pitan76.net/wp-content/uploads/2022/07/...
まず、設定を選びましょう。
&ref(https://blog.pitan76.net/wp-content/uploads/2022/07/...
配送方法はローカルディレクトリに設定してあげましょう。
ローカルディレクトリの入力欄にはつくったフォルダであるsim...
&ref(https://blog.pitan76.net/wp-content/uploads/2022/07/...
生成を選択し、静的ファイルを生成するをクリックしましょう。
待機すると生成されると思います。
クソ長いですよね、、、一分もかかりました…(笑)
* GitHub の設定 [#h5725b46]
&ref(https://blog.pitan76.net/wp-content/uploads/2022/07/...
GitHubのリポジトリでSettingsを開き、Pagesの項目に移動して...
Sourceのブランチをmainで選択してSaveをクリックしましょう。
これで完了なのですが、Custom domainも私は設定しました。
* おまけ [#f1bfb07a]
** 検索を機能させる [#ic5d761d]
''※こちらの検索機能に関しては完全に機能しているわけではあ...
静的化したら検索機能が動作しないんですよ。まあ当たり前な...
検索機能はPHPでつくられており、サーバーサイドで動的に処理...
つまり、クライアント側で処理できるようにインデックス化さ...
WordPressにはRest APIがあります。
APIで生成されたjsonを静的化してしまえばよいという考えにな...
めちゃくちゃなことしてますが、私はこうするしかないと思い...
そのためのPHPスクリプトをここにおいておきます。
名前は適当ですが、なんでもいいです。
- push.php
<?php
define('URL', dirname((empty($_SERVER['HTTPS']) ? 'http:...
define('DIR', "simplystatic/");
function save_url2static($path, $ext = 'json') {
$src = file_get_contents(URL . $path);
if (!file_exists(DIR . $path))
mkdir(DIR . $path, 0777, true);
$src = str_replace(str_replace('/', '\/', URL), '/', $sr...
file_put_contents(DIR . $path . "/index." . $ext, $src);
}
save_url2static("wp-json/wp/v2/posts");
save_url2static("wp-json/wp/v2/pages");
save_url2static("wp-json/wp/v2/media");
save_url2static("wp-json/wp/v2/comments");
save_url2static("wp-json/wp/v2/taxonomies");
save_url2static("wp-json/wp/v2/taxonomies");
save_url2static("static-json/categories");
if (!file_exists(DIR . 'conv_for_simply.rb'))
copy('conv_for_simply.rb', DIR . 'conv_for_simply.rb');
copy('client.js', DIR . 'client.js');
echo exec('push.bat') . '<br />';
echo "pushed!<br />";
exit;
- client.js
var $client_lang = {
search_result: "“$1” の検索結果",
search_in_site: "サイト内を検索",
posts_not_found: "投稿が見つかりませんでした。"
};
var $url = new URL(window.location.href);
var $params = $url.searchParams;
var $htmlSetted = false;
function apprStr($str) {
$str = $str.toLowerCase();
$str = $str.replace(/(<([^>]+)>)/gi, '');
$str = $str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function($m) {
return String.fromCharCode($m.charCodeAt(0) - 0xFEE0);
});
$str = $str.replace(/[ァ-ヶ]/g, function($m) {
return String.fromCharCode($m.charCodeAt(0) - 0x60);
});
return $str;
}
function getMeta($metaProperty) {
var $metas = document.getElementsByTagName('meta');
for (let $j = 0; $j < $metas.length; $j++) {
if ($metas[$j].getAttribute('property') === $metaPropert...
return $metas[$j].getAttribute('content');
}
}
}
if ($params.has('s') ) {
var $s = $params.get('s');
var $isFound = false;
var $html = `
<h1 id="archive-title" class="archive-title"><span class...
<form class="search-box input-box" method="get" action="...
<input type="text" placeholder="${$client_lang['search_i...
<button type="submit" class="search-submit" aria-label="...
</form>
<div id="list" class="list ect-entry-card front-page-typ...
`;
document.title = $client_lang['search_result'].replace('...
var $categories_name = new Array();
fetch('./static-json/categories/index.json') // /index.j...
.then(($response) => $response.json())
.then(($data) => {
if ($data !== undefined)
Object.keys($data).forEach($key => {
var $item = $data[$key];
$categories_name[$item.term_id] = $item.name;
});
fetch('./wp-json/wp/v2/posts/index.json')
.then(($response) => $response.json())
.then(($data) => {
if ($data !== undefined)
$data.forEach($item => {
if (apprStr($item.title.rendered).indexOf(apprStr($s)) !...
$isFound = true;
var $categories_html;
$item.categories.forEach($id => {
$categories_html += '<span class="entry-category">' + $c...
});
var $post_date = $item.date.replace('-', '.');
$post_date = $post_date.substr(0, $post_date.indexOf('T'...
$html += `
<a href="${$item.link}" class="entry-card-wrap a-wrap bo...
<article>
<figure class="entry-card-thumb card-thumb e-card-thumb">
<img data-src="/wp-content/themes/cocoon-master/images/n...
<div class="entry-card-content card-content e-card-conte...
<h2 class="entry-card-title card-title e-card-title" ite...
<div class="entry-card-snippet card-snippet e-card-snipp...
${$item.excerpt.rendered}
</div>
<div class="entry-card-meta card-meta e-card-meta">
<div class="entry-card-info e-card-info">
<span class="post-date"><span class="fa fa-clock-o" aria...
</div>
<div class="entry-card-categorys">${$categories_html}</d...
</div>
</div><!-- /.entry-card-content -->
</article>
</a>
`;
}
});
if ($isFound === false) {
$html += `
<div class="posts-not-found">
<h2>NOT FOUND</h2>
<p>${$client_lang['posts_not_found']}</p>
</div>
`;
}
$html += `</div><!-- .list -->`;
document.addEventListener("DOMContentLoaded", function() {
if ($htmlSetted === false) {
document.getElementById("main").innerHTML = $html;
$htmlSetted = true;
}
});
window.addEventListener("load", function() {
if ($htmlSetted === false) {
document.getElementById("main").innerHTML = $html;
$htmlSetted = true;
}
});
});
});
}
テーマのheader.phpの</head>前に以下のコードを加える
<script src="./client.js" type="text/javascript" charset...
** コメントを機能させる [#dcb456a0]
Utterancesというものを使い、GitHubのIssueをサイトに埋め込...
[[https://utteranc.es/]]
テーマのcomments.phpを書き換えます。
<?php //コメントエリア
/**
* Cocoon WordPress Theme
* @author: yhira
* @link: https://wp-cocoon.com/
* @license: http://www.gnu.org/licenses/gpl-2.0.html GPL...
*/
if ( !defined( 'ABSPATH' ) ) exit;
if ( is_comment_allow() || have_comments() ): ?>
<div id="utteranc_comment">
<!-- comment area -->
ここにコード
</div>
<?php endif ?>
生成したコードを「ここにコード」に貼り付けましょう。
** コメント [#cmt]
#pctrlcmt
&size(10){キーワード: GitHub Pages, WordPress, Github, 無...
終了行:
#include(include/oldblog,notitle)
&ref(https://wikichree.com/pitablog/thumbnail/E38090576F7...
* 【WordPress】GitHub Pagesを利用して静的化したWordPress...
//#seo(description,テンプレ)
//#seo(keywords,テンプレ)
#splitbody{{
LEFT:
&tag(情報技術,Git,GitHub,JavaScript,PHP,WordPress,サーバ...
#split
RIGHT:&size(13){投稿日: 2022-07-20 (水)};
}}
#bcontents
元々、このブログ以前のブログはレンタルサーバーで動かして...
あまり更新しなかったため、必要性はないと感じ、新たにWordP...
この２日間かけて、ようやく少し使えるような形になりました。
今回は、WordPressプラグインである、Simply Staticを使って...
Cocoonテーマを利用しているので少し変わるかもしれません。
私はWordPressに関しては完全に素人なので申し訳ないです。
目次
+ [[手順>https://blog.pitan76.net/2022072049/#toc1" tabin...
+ [[Simply Staticの導入>https://blog.pitan76.net/20220720...
+ [[GitHub の設定>https://blog.pitan76.net/2022072049/#to...
+ [[おまけ>https://blog.pitan76.net/2022072049/#toc4" tab...
++ [[検索を機能させる>https://blog.pitan76.net/2022072049...
++ [[コメントを機能させる>https://blog.pitan76.net/202207...
+
* 手順 [#a5d2d2db]
簡単にまとめておきます。
+
++ Simply Staticを導入する
++ 適当にSimply Static用のフォルダをつくる (つくったフォ...
++ WPの管理メニューのSimply Staticのページから静的ファイ...
++ simplystatic/をGitリポジトリにする (simplystatic下で以...
git init
git add *
git commit -m "first"
git remote add origin https://github.com/(ユーザー名)/(...
git push origin main
++
++ [[conv_for_simply.rb>https://www.lotusdigital.jp/b/web...
++ WordPressのルートにbatファイル(push.bat)をつくる
cd ./simplystatic/
ruby conv_for_simply.rb
git add *
git commit -m "update"
git push
++
++ batファイルを実行する
++ GitHub Pagesの設定をする
+
* Simply Staticの導入 [#q4fdc5ac]
&ref(https://blog.pitan76.net/wp-content/uploads/2022/07/...
※インストール後、必ず有効化しておきましょう。
こちらのプラグインは静的化するためのプラグインです。
静的化とは静的ファイルであるHTML、JS、CSS、画像など簡単に...
つまり、PHPが生成したソースをHTMLファイルとして保存します。
適当にSimply Static用のフォルダをつくります。つくったフォ...
正しく導入できれば、WordPressの管理メニューのサイドバーに...
&ref(https://blog.pitan76.net/wp-content/uploads/2022/07/...
まず、設定を選びましょう。
&ref(https://blog.pitan76.net/wp-content/uploads/2022/07/...
配送方法はローカルディレクトリに設定してあげましょう。
ローカルディレクトリの入力欄にはつくったフォルダであるsim...
&ref(https://blog.pitan76.net/wp-content/uploads/2022/07/...
生成を選択し、静的ファイルを生成するをクリックしましょう。
待機すると生成されると思います。
クソ長いですよね、、、一分もかかりました…(笑)
* GitHub の設定 [#h5725b46]
&ref(https://blog.pitan76.net/wp-content/uploads/2022/07/...
GitHubのリポジトリでSettingsを開き、Pagesの項目に移動して...
Sourceのブランチをmainで選択してSaveをクリックしましょう。
これで完了なのですが、Custom domainも私は設定しました。
* おまけ [#f1bfb07a]
** 検索を機能させる [#ic5d761d]
''※こちらの検索機能に関しては完全に機能しているわけではあ...
静的化したら検索機能が動作しないんですよ。まあ当たり前な...
検索機能はPHPでつくられており、サーバーサイドで動的に処理...
つまり、クライアント側で処理できるようにインデックス化さ...
WordPressにはRest APIがあります。
APIで生成されたjsonを静的化してしまえばよいという考えにな...
めちゃくちゃなことしてますが、私はこうするしかないと思い...
そのためのPHPスクリプトをここにおいておきます。
名前は適当ですが、なんでもいいです。
- push.php
<?php
define('URL', dirname((empty($_SERVER['HTTPS']) ? 'http:...
define('DIR', "simplystatic/");
function save_url2static($path, $ext = 'json') {
$src = file_get_contents(URL . $path);
if (!file_exists(DIR . $path))
mkdir(DIR . $path, 0777, true);
$src = str_replace(str_replace('/', '\/', URL), '/', $sr...
file_put_contents(DIR . $path . "/index." . $ext, $src);
}
save_url2static("wp-json/wp/v2/posts");
save_url2static("wp-json/wp/v2/pages");
save_url2static("wp-json/wp/v2/media");
save_url2static("wp-json/wp/v2/comments");
save_url2static("wp-json/wp/v2/taxonomies");
save_url2static("wp-json/wp/v2/taxonomies");
save_url2static("static-json/categories");
if (!file_exists(DIR . 'conv_for_simply.rb'))
copy('conv_for_simply.rb', DIR . 'conv_for_simply.rb');
copy('client.js', DIR . 'client.js');
echo exec('push.bat') . '<br />';
echo "pushed!<br />";
exit;
- client.js
var $client_lang = {
search_result: "“$1” の検索結果",
search_in_site: "サイト内を検索",
posts_not_found: "投稿が見つかりませんでした。"
};
var $url = new URL(window.location.href);
var $params = $url.searchParams;
var $htmlSetted = false;
function apprStr($str) {
$str = $str.toLowerCase();
$str = $str.replace(/(<([^>]+)>)/gi, '');
$str = $str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function($m) {
return String.fromCharCode($m.charCodeAt(0) - 0xFEE0);
});
$str = $str.replace(/[ァ-ヶ]/g, function($m) {
return String.fromCharCode($m.charCodeAt(0) - 0x60);
});
return $str;
}
function getMeta($metaProperty) {
var $metas = document.getElementsByTagName('meta');
for (let $j = 0; $j < $metas.length; $j++) {
if ($metas[$j].getAttribute('property') === $metaPropert...
return $metas[$j].getAttribute('content');
}
}
}
if ($params.has('s') ) {
var $s = $params.get('s');
var $isFound = false;
var $html = `
<h1 id="archive-title" class="archive-title"><span class...
<form class="search-box input-box" method="get" action="...
<input type="text" placeholder="${$client_lang['search_i...
<button type="submit" class="search-submit" aria-label="...
</form>
<div id="list" class="list ect-entry-card front-page-typ...
`;
document.title = $client_lang['search_result'].replace('...
var $categories_name = new Array();
fetch('./static-json/categories/index.json') // /index.j...
.then(($response) => $response.json())
.then(($data) => {
if ($data !== undefined)
Object.keys($data).forEach($key => {
var $item = $data[$key];
$categories_name[$item.term_id] = $item.name;
});
fetch('./wp-json/wp/v2/posts/index.json')
.then(($response) => $response.json())
.then(($data) => {
if ($data !== undefined)
$data.forEach($item => {
if (apprStr($item.title.rendered).indexOf(apprStr($s)) !...
$isFound = true;
var $categories_html;
$item.categories.forEach($id => {
$categories_html += '<span class="entry-category">' + $c...
});
var $post_date = $item.date.replace('-', '.');
$post_date = $post_date.substr(0, $post_date.indexOf('T'...
$html += `
<a href="${$item.link}" class="entry-card-wrap a-wrap bo...
<article>
<figure class="entry-card-thumb card-thumb e-card-thumb">
<img data-src="/wp-content/themes/cocoon-master/images/n...
<div class="entry-card-content card-content e-card-conte...
<h2 class="entry-card-title card-title e-card-title" ite...
<div class="entry-card-snippet card-snippet e-card-snipp...
${$item.excerpt.rendered}
</div>
<div class="entry-card-meta card-meta e-card-meta">
<div class="entry-card-info e-card-info">
<span class="post-date"><span class="fa fa-clock-o" aria...
</div>
<div class="entry-card-categorys">${$categories_html}</d...
</div>
</div><!-- /.entry-card-content -->
</article>
</a>
`;
}
});
if ($isFound === false) {
$html += `
<div class="posts-not-found">
<h2>NOT FOUND</h2>
<p>${$client_lang['posts_not_found']}</p>
</div>
`;
}
$html += `</div><!-- .list -->`;
document.addEventListener("DOMContentLoaded", function() {
if ($htmlSetted === false) {
document.getElementById("main").innerHTML = $html;
$htmlSetted = true;
}
});
window.addEventListener("load", function() {
if ($htmlSetted === false) {
document.getElementById("main").innerHTML = $html;
$htmlSetted = true;
}
});
});
});
}
テーマのheader.phpの</head>前に以下のコードを加える
<script src="./client.js" type="text/javascript" charset...
** コメントを機能させる [#dcb456a0]
Utterancesというものを使い、GitHubのIssueをサイトに埋め込...
[[https://utteranc.es/]]
テーマのcomments.phpを書き換えます。
<?php //コメントエリア
/**
* Cocoon WordPress Theme
* @author: yhira
* @link: https://wp-cocoon.com/
* @license: http://www.gnu.org/licenses/gpl-2.0.html GPL...
*/
if ( !defined( 'ABSPATH' ) ) exit;
if ( is_comment_allow() || have_comments() ): ?>
<div id="utteranc_comment">
<!-- comment area -->
ここにコード
</div>
<?php endif ?>
生成したコードを「ここにコード」に貼り付けましょう。
** コメント [#cmt]
#pctrlcmt
&size(10){キーワード: GitHub Pages, WordPress, Github, 無...
ページ名:
検索
AND検索
OR検索
↑
プロフィール
Pitan
プログラミングや音MADやらが趣味
↑
最新のページ
最新の5件
2024-06-26
【アセンブリ言語】C言語コンパイルしてアセンブリ言語を解読していく
2024-05-29
PHPのチートシート
2024-05-14
WikiChree.COMの管理者の妄想？
2024-05-08
Visual Basicを使ってみた感想
2024-04-25
PHPってもう時代遅れ？それでも私がPHPを使い続ける理由
[
もっと見る
]
↑
タグ
ゲーム
サービス
プログラミング
情報技術
通信技術
[
もっと見る
]
↑
人気のページ
人気の5件
FrontPage
(29734)
RecentUpdates
(848)
【Discord】強力なスパム対策ができるボット「Wick」を紹介します。
(489)
【Minecraft】 FabricとForgeどっちがいいのだろうか？
(478)
無料のWikiソフトウェアを比較してみる
(199)
↑
カウンター
合計:
0
今日:
0
昨日:
0
オンライン:
18
![[PukiWiki]](./skin/logo.png "[PukiWiki]"){kind=logo}
