Google Static MapsをWordPressに簡単に貼れるプラグインをChatGPTにサクッと作ってもらった
おでかけブログのGoogle Static Mapsをシコシコとコード書いていたんですが、そろそろIFTTTもダメになる頃だろうしということで、WordPressのプラグインをChatGPTに作ってもらいました。
IFTTTからWordpressにmap付投稿が、GoogleMapじゃ無くなってしまって実質ダメになってしまった件 | happyman web
もう3年以上だましだましやっていたんですね。ただのバカです。
ChatGPTさんに「Google Static MapsをWordPressに簡単に貼れるプラグイン」を作りたいとお願いした。
作ったGoogle Static Mapプラグイン に 管理画面からAPIキーやデフォルトサイズを設定できる機能 を追加した。
作ってくれたコードがこれ。
<?php
/*
Plugin Name: Google Static Map
Description: 投稿や固定ページでGoogle Static Mapsを簡単に表示できるプラグイン。管理画面でAPIキーやサイズを設定可能。
Version: 1.1
Author: あなたの名前
*/
if ( ! defined( 'ABSPATH' ) ) exit;
// -------------------
// ショートコード
// -------------------
add_shortcode('google_static_map', 'gsm_shortcode');
function gsm_shortcode($atts) {
$settings = get_option('gsm_settings'); // 管理画面で設定した値を取得
$atts = shortcode_atts(array(
'lat' => '35.681236',
'lng' => '139.767125',
'zoom' => isset($settings['zoom']) ? $settings['zoom'] : 16,
'width' => isset($settings['width']) ? $settings['width'] : 600,
'height' => isset($settings['height']) ? $settings['height'] : 400,
'marker_color' => isset($settings['marker_color']) ? $settings['marker_color'] : 'red',
'maptype' => 'roadmap',
'api_key' => isset($settings['api_key']) ? $settings['api_key'] : ''
), $atts, 'google_static_map');
$url = "https://maps.googleapis.com/maps/api/staticmap?"
. "center={$atts['lat']},{$atts['lng']}"
. "&zoom={$atts['zoom']}"
. "&size={$atts['width']}x{$atts['height']}"
. "&maptype={$atts['maptype']}"
. "&markers=color:{$atts['marker_color']}|{$atts['lat']},{$atts['lng']}"
. "&key={$atts['api_key']}";
return '<img src="' . esc_url($url) . '" alt="Google Static Map" width="' . esc_attr($atts['width']) . '" height="' . esc_attr($atts['height']) . '">';
}
// -------------------
// 管理画面メニュー追加
// -------------------
add_action('admin_menu', 'gsm_add_admin_menu');
add_action('admin_init', 'gsm_settings_init');
function gsm_add_admin_menu() {
add_options_page(
'Google Static Map 設定',
'Google Static Map',
'manage_options',
'google_static_map',
'gsm_options_page'
);
}
function gsm_settings_init() {
register_setting('gsm_settings_group', 'gsm_settings');
add_settings_section(
'gsm_settings_section',
'Google Static Map 設定',
null,
'google_static_map'
);
add_settings_field(
'api_key',
'APIキー',
'gsm_api_key_render',
'google_static_map',
'gsm_settings_section'
);
add_settings_field(
'zoom',
'デフォルトズーム',
'gsm_zoom_render',
'google_static_map',
'gsm_settings_section'
);
add_settings_field(
'width',
'幅（px）',
'gsm_width_render',
'google_static_map',
'gsm_settings_section'
);
add_settings_field(
'height',
'高さ（px）',
'gsm_height_render',
'google_static_map',
'gsm_settings_section'
);
add_settings_field(
'marker_color',
'マーカー色',
'gsm_marker_color_render',
'google_static_map',
'gsm_settings_section'
);
}
// -------------------
// 各フィールドの表示
// -------------------
function gsm_api_key_render() {
$options = get_option('gsm_settings');
?>
<input type='text' name='gsm_settings[api_key]' value='<?php echo isset($options['api_key']) ? esc_attr($options['api_key']) : ''; ?>' style="width:400px">
<?php
}
function gsm_zoom_render() {
$options = get_option('gsm_settings');
?>
<input type='number' name='gsm_settings[zoom]' value='<?php echo isset($options['zoom']) ? esc_attr($options['zoom']) : 16; ?>'>
<?php
}
function gsm_width_render() {
$options = get_option('gsm_settings');
?>
<input type='number' name='gsm_settings[width]' value='<?php echo isset($options['width']) ? esc_attr($options['width']) : 600; ?>'>
<?php
}
function gsm_height_render() {
$options = get_option('gsm_settings');
?>
<input type='number' name='gsm_settings[height]' value='<?php echo isset($options['height']) ? esc_attr($options['height']) : 400; ?>'>
<?php
}
function gsm_marker_color_render() {
$options = get_option('gsm_settings');
?>
<input type='text' name='gsm_settings[marker_color]' value='<?php echo isset($options['marker_color']) ? esc_attr($options['marker_color']) : 'red'; ?>'>
<?php
}
// -------------------
// 設定ページHTML
// -------------------
function gsm_options_page() {
?>
<form action='options.php' method='post'>
<h2>Google Static Map プラグイン設定</h2>
<?php
settings_fields('gsm_settings_group');
do_settings_sections('google_static_map');
submit_button();
?>
</form>
<?php
}
?>
これで完成。
あとはここにAPIKEYいれてやれば。
[google_static_map lat=”35.1698″ lng=”136.9373″]
とWordPressの記事に書いてやれば良い。
道の駅 つくで手作り村にやってきました。ソフトクリームトマトスペシャルゲットだぜ。 | はっぴ～まんの弁当おじさん
できました。あぁChatGPTさんすごいわ。
Amazon Mastercard (アマゾン マスターカード) 最大2%ポイント還元
￥1入会ポイント 2,000ポイント以上付与
(2025年12月5日 12:52 GMT +09:00 時点 - 詳細はこちら商品価格と取扱状況は記載された日時の時点で正確で、また常に変動します。Amazon のサイトに表示された価格と取扱状況の情報は、この商品が購入されたその時のものが適用されます。)
只今、イメージセットを取得中です。
東洋アルミ 整流板付専用パッと貼るだけスーパーフィルター 3074
￥577 (2025年12月5日 01:23 GMT +09:00 時点 - 詳細はこちら商品価格と取扱状況は記載された日時の時点で正確で、また常に変動します。Amazon のサイトに表示された価格と取扱状況の情報は、この商品が購入されたその時のものが適用されます。)
只今、イメージセットを取得中です。
