自作プラグイン/ogp.inc.php
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
** ogp.inc.php [#h2f1c3f1]
|RIGHT:100|LEFT:360|c
|~サマリ|OGPを取得してブログカードを表示する|
|~リビジョン|1.3|
|~対応バージョン|1.5.1|
|~投稿者|[[m0370]]|
|~投稿日|&new{2019-09-14 (土) 07:28:03};|
はてなブログのようなブログカードを実装するプラグインを探...
*本体 [#vb43c87b]
下記のスクリプトをogp.inc.phpと名前を付けて保存し、plugin...
<?php
// 'ogp' plugin for PukiWiki
// author: m0370
// Twitter: @m0370
// ver1.0 (2019.9.10)
// ひとまずOGPを取得して表示する機能を実装しました。
// ver1.1 (2019.9.17)
// Cache機能を実装しました。CACHE.DIRのogpというサブフォ...
// ver1.2 (2019.11.10)
// 第2引数にampを入れることでimgタグをamp-imgに変更
// ver1.3 (2020.5.2)
// ファイル形式（GIF・PNGなど）を反映したキャッシュファ...
function plugin_ogp_convert()
{
$ogpurl = func_get_args();
$uri = get_script_uri();
$ogpurlsp = (explode('://', $ogpurl[0]));
$ogpurlmd = md5($ogpurlsp[1]);
$datcache = CACHE_DIR . 'ogp/' . $ogpurlmd . '.dat';
$gifcache = CACHE_DIR . 'ogp/' . $ogpurlmd . '.gif';
$jpgcache = CACHE_DIR . 'ogp/' . $ogpurlmd . '.jpg';
$pngcache = CACHE_DIR . 'ogp/' . $ogpurlmd . '.png';
if(file_exists($pngcache)) { $imgcache = $pngcache ; }
else if(file_exists($gifcache)) { $imgcache = $gifcache ...
else { $imgcache = $jpgcache ; }
if(file_exists($datcache) && file_exists($imgcache)) {
$ogpcache = file_get_contents($datcache);
$ogpcachearray = explode("<>", $ogpcache);
$title = $ogpcachearray[0];
$description = $ogpcachearray[1];
$src = $imgcache ;
} else {
require_once(PLUGIN_DIR.'opengraph.php');
$graph = OpenGraph::fetch($ogpurl[0]);
if ($graph) {
$title = $graph->title;
$url = $graph->url;
$description = $graph->description;
$src = $graph->image;
$title_check = utf8_decode($title);
$description_check = utf8_decode($description);
if(mb_detect_encoding($title_check) == 'UTF-8'){
$title = $title_check; // 文字化け解消
}
if(mb_detect_encoding($description_check) == 'UTF-8'){
$description = $description_check; // 文字化け解消
}
$detects = array('ASCII','EUC-JP','SJIS','JIS','CP51...
// 上記以外でもUTF-8以外の文字コードが渡ってきてた場...
if(mb_detect_encoding($title) != 'UTF-8'){
$title = mb_convert_encoding($title, 'UTF-8', mb...
}
if(mb_detect_encoding($description) != 'UTF-8'){
$description = mb_convert_encoding($description,...
}
$imgfile = file_get_contents($src);
$imginfo = getimagesize($src);
file_put_contents($datcache, $title . '<>' . $descripti...
$filetype = $imginfo[2];
if( $filetype == 1 ){
file_put_contents($gifcache, $imgfile) ;
} else if ( $filetype == 3 ){
file_put_contents($pngcache, $imgfile) ;
} else {
file_put_contents($jpgcache, $imgfile) ;
}
}
}
if($ogpurl[1] == "amp"){
$imgtag = 'amp-img class="ogp-img" layout="fill"' ;
} else {
$imgtag = 'img class="ogp-img"' ;
}
return <<<EOD
<div class="ogp">
<div class="ogp-img-box"><$imgtag src="$src" alt="$title...
<div class="ogp-title">$title</div>
<div class="ogp-description">$description</div>
<div class="ogp-url">$ogpurl[0]</div>
<a class ="ogp-link" href="$ogpurl[0]"></a>
</div>
EOD;
}
?>
*スタイルシート [#wf91838c]
/*OGP スタイルシート*/
.ogp {
position: relative;
z-index: 1; /* 必要であればリンク要素の重なりのベー...
word-wrap: break-word;
word-break: break-all;
border: 1px solid rgba(0,0,0,.1);
border-radius: 4px;
padding: 10px;
margin:20px 2px;
min-height: 100px;
max-height: 280px;
max-width: 480px;
overflow: hidden;
}
.ogp-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent:-999px;
z-index: 2; /* 必要であればリンク要素の重なりのベー...
}
.ogp-title{
font-size: 100%;
font-weight:bold;
margin: 0 0 2px;
line-height: 1.3em;
color: #000;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ogp-description{
line-height: 1.5em;
font-size: 80%;
color: #000;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.ogp-url{
line-height: 1.8em;
font-size: 80%;
color: #7b8387;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.ogp-img-box{
float: right;
position: relative;
width: 100px;
height: 100px;
margin-left:10px;
}
.ogp-img img{object-fit: cover;}
img.ogp-img{width: 100px;height: 100px;object-fit: cover;}
終了行:
** ogp.inc.php [#h2f1c3f1]
|RIGHT:100|LEFT:360|c
|~サマリ|OGPを取得してブログカードを表示する|
|~リビジョン|1.3|
|~対応バージョン|1.5.1|
|~投稿者|[[m0370]]|
|~投稿日|&new{2019-09-14 (土) 07:28:03};|
はてなブログのようなブログカードを実装するプラグインを探...
*本体 [#vb43c87b]
下記のスクリプトをogp.inc.phpと名前を付けて保存し、plugin...
<?php
// 'ogp' plugin for PukiWiki
// author: m0370
// Twitter: @m0370
// ver1.0 (2019.9.10)
// ひとまずOGPを取得して表示する機能を実装しました。
// ver1.1 (2019.9.17)
// Cache機能を実装しました。CACHE.DIRのogpというサブフォ...
// ver1.2 (2019.11.10)
// 第2引数にampを入れることでimgタグをamp-imgに変更
// ver1.3 (2020.5.2)
// ファイル形式（GIF・PNGなど）を反映したキャッシュファ...
function plugin_ogp_convert()
{
$ogpurl = func_get_args();
$uri = get_script_uri();
$ogpurlsp = (explode('://', $ogpurl[0]));
$ogpurlmd = md5($ogpurlsp[1]);
$datcache = CACHE_DIR . 'ogp/' . $ogpurlmd . '.dat';
$gifcache = CACHE_DIR . 'ogp/' . $ogpurlmd . '.gif';
$jpgcache = CACHE_DIR . 'ogp/' . $ogpurlmd . '.jpg';
$pngcache = CACHE_DIR . 'ogp/' . $ogpurlmd . '.png';
if(file_exists($pngcache)) { $imgcache = $pngcache ; }
else if(file_exists($gifcache)) { $imgcache = $gifcache ...
else { $imgcache = $jpgcache ; }
if(file_exists($datcache) && file_exists($imgcache)) {
$ogpcache = file_get_contents($datcache);
$ogpcachearray = explode("<>", $ogpcache);
$title = $ogpcachearray[0];
$description = $ogpcachearray[1];
$src = $imgcache ;
} else {
require_once(PLUGIN_DIR.'opengraph.php');
$graph = OpenGraph::fetch($ogpurl[0]);
if ($graph) {
$title = $graph->title;
$url = $graph->url;
$description = $graph->description;
$src = $graph->image;
$title_check = utf8_decode($title);
$description_check = utf8_decode($description);
if(mb_detect_encoding($title_check) == 'UTF-8'){
$title = $title_check; // 文字化け解消
}
if(mb_detect_encoding($description_check) == 'UTF-8'){
$description = $description_check; // 文字化け解消
}
$detects = array('ASCII','EUC-JP','SJIS','JIS','CP51...
// 上記以外でもUTF-8以外の文字コードが渡ってきてた場...
if(mb_detect_encoding($title) != 'UTF-8'){
$title = mb_convert_encoding($title, 'UTF-8', mb...
}
if(mb_detect_encoding($description) != 'UTF-8'){
$description = mb_convert_encoding($description,...
}
$imgfile = file_get_contents($src);
$imginfo = getimagesize($src);
file_put_contents($datcache, $title . '<>' . $descripti...
$filetype = $imginfo[2];
if( $filetype == 1 ){
file_put_contents($gifcache, $imgfile) ;
} else if ( $filetype == 3 ){
file_put_contents($pngcache, $imgfile) ;
} else {
file_put_contents($jpgcache, $imgfile) ;
}
}
}
if($ogpurl[1] == "amp"){
$imgtag = 'amp-img class="ogp-img" layout="fill"' ;
} else {
$imgtag = 'img class="ogp-img"' ;
}
return <<<EOD
<div class="ogp">
<div class="ogp-img-box"><$imgtag src="$src" alt="$title...
<div class="ogp-title">$title</div>
<div class="ogp-description">$description</div>
<div class="ogp-url">$ogpurl[0]</div>
<a class ="ogp-link" href="$ogpurl[0]"></a>
</div>
EOD;
}
?>
*スタイルシート [#wf91838c]
/*OGP スタイルシート*/
.ogp {
position: relative;
z-index: 1; /* 必要であればリンク要素の重なりのベー...
word-wrap: break-word;
word-break: break-all;
border: 1px solid rgba(0,0,0,.1);
border-radius: 4px;
padding: 10px;
margin:20px 2px;
min-height: 100px;
max-height: 280px;
max-width: 480px;
overflow: hidden;
}
.ogp-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent:-999px;
z-index: 2; /* 必要であればリンク要素の重なりのベー...
}
.ogp-title{
font-size: 100%;
font-weight:bold;
margin: 0 0 2px;
line-height: 1.3em;
color: #000;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ogp-description{
line-height: 1.5em;
font-size: 80%;
color: #000;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.ogp-url{
line-height: 1.8em;
font-size: 80%;
color: #7b8387;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.ogp-img-box{
float: right;
position: relative;
width: 100px;
height: 100px;
margin-left:10px;
}
.ogp-img img{object-fit: cover;}
img.ogp-img{width: 100px;height: 100px;object-fit: cover;}
ページ名:
![[PukiWiki-official]](image/pukiwiki-official.png "[PukiWiki-official]")
