フォトエンベッドメーカーは、Googleフォトの共有URLリンクを使い WordPress の投稿へ埋め込むためのコードを生成するWebサービスです (^^)/
フォトエンベッドメーカーの利用方法
- Google フォトサイト を開きます
- WordPress の記事に埋め込みたいGoogle フォトのアルバムや画像を共有設定して、共有したリンクを取得します
- 取得した共有リンクをこのページの共有URL入力欄にコピーして、コード生成 をクリックします
- 作成されたコードを クリップボードへコピー ボタンでコピーして WordPress の記事編集をテキストモードにして張り付ければ表示出来ます
※WordPress のブロックエディター(Gutenberg)をお使いの場合には、カスタムHTMLブロックを使い貼り付けて下さい
※Googleフォトを使用するには Googleのアカウントが必要となっていますので、アカウントがない場合は事前に作成してからご利用ください
コード生成
Loading…';
window.addEventListener('DOMContentLoaded', function(){
Photolink_url_submit = function(nonce) {
const share_url = document.querySelector("input[name='photoembed_share_url']").value.trim();
if (share_url.length > 0) {
document.getElementById('photoembed-url-submit').disabled = true;
document.getElementById('photoembed-embed-preview').innerHTML = loading;
document.querySelector("textarea[name='photoembed-embed-html']").value = '';
fetch(ajaxurl, {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({
action: "photoembed_maker",
share_url: share_url,
maxwidth: document.querySelector("input[name='photoembed-maxwidth']").value,
albumtype: document.querySelector("select[name='photoembed-albumtype']").value,
columns: document.querySelector("select[name='photoembed-columns']").value,
caption: document.querySelector("input[name='photoembed-caption']").value,
keycode: '',
_ajax_nonce: nonce
}).toString()
})
.then(function(response) {
if(response.ok) {
return response.json();
}
throw new Error('Network response was not ok.');
})
.then(function(json) {
document.getElementById('photoembed-url-submit').disabled = false;
if (json.data !== '') {
document.getElementById('photoembed-embed-preview').innerHTML = json.data;
document.querySelector("textarea[name='photoembed-embed-html']").value = json.data;
if (typeof initPhotoSwipeFromDOM !== 'undefined') {
initPhotoSwipeFromDOM(".pswp-gallery");
}
} else {
document.getElementById('photoembed-embed-preview').innerHTML = '';
alert(json.msg);
location.reload();
}
})
.catch(function(error) {
document.getElementById('photoembed-url-submit').disabled = false;
document.getElementById('photoembed-embed-preview').innerHTML = '';
});
return false;
}
};
});
プレビューと生成コード
アルバムの場合は、ギャラリー用のHTMLコードとスタイル定義を生成しますが、生成するアルバム内の画像は最大１８枚までに制限しています
生成するコードは、Photo Swipe に対応したマークアップを行っていまが、PhotoSwipeを使うにはテーマで PhotoSwipe を読み込み有効化する必要があります。 WordPressでPhotoSwipe対応のGoogleフォトを表示する方法 を参考に設定してください
使い方、ビジュアルエディターで表示させる方法、表示サンプル等を下記記事でも紹介しています (^^)
Googleフォトのアルバムを WordPressに埋め込む為のコード生成サービス公開
WordPressでPhotoSwipe対応のGoogleフォトを表示する方法
セルティスラボ