はじめに で書いたGoogle Maps Javascript Apiについて、WordPress側でやったことを書きます。 この記事ではHTMLのformにhidden属性のinputタグ設定し、idとvalueでキーバリュー型の情報を格納しています。 こんな感じ <form id=""> <input type="hidden" id="count" value="4" /> <input type="hidden" id="p0-label" value="Start" /> <input type="hidden" id="p0-title" value="Kamakura Station" /> <input type="hidden" id="p0-latlng" value="35.319264, 139.550004" /> <input type="hidden" id="p0-description" value="Tour starts from here" /> <input type="hidden" id="p1-label" value="1" /> <input type="hidden" id="p1-title" value="Tsurugaoka Hachimangu Shrine" /> <input type="hidden" id="p1-latlng" value="35.326074, 139.556485" /> <input type="hidden" id="p1-description" value="Built as a tutelary shrine for the Genji family in 1191, the most gorgeous shrine in Kamakura attracts millions of visitors for its history, culture, architecture and various traditional events." /> <input type="hidden" id="p2-label" value="2" /> <input type="hidden" id="p2-title" value="Hase-dera Temple" /> <input type="hidden" id="p2-latlng" value="35.312416, 139.533042" /> <input type="hidden" id="p2-description" value="This legendary old temple boasts of its large wooden gilded statue of Eleven-faced Goddess of Mercy, a beautiful Japanese-style garden and the nice view of the ocean from a terrace." /> <input type="hidden" id="p3-label" value="3" /> <input type="hidden" id="p3-title" value="the Great Buddha" /> <input type="hidden" id="p3-latlng" value="35.315858, 139.535371" /> <input type="hidden" id="p3-description" value="The Great Buddha, a National Treasure and a Symbol of Kamakura, was cast in bronze in the middle of the 13th C. The hollow interior of the statue is open to the public." /> </form> WordPressはphpとMySqlで動いているので、MySqlにルート設定用のテーブルをもたせ、functions.phpでデータを呼び出してformを生成しています。 また、使う際にはWordPressのショートコードを使うことでWordPressのPage作成時に簡単に地図が埋め込めるようにしました。 DataBase wp2_course、wp2_route、wp2_placeの３つのテーブルを使っています。プレサフィックスの"wp2_"はWordPress用のテーブルがすべてこの形式だったので真似しただけで、理由はないんですが、今思うと別に真似しなくても良かったような。 wp2_course(コース設定用テーブル） 物理名 データ型 NULL 既定値 説明 id text no なし コース識別コード。ショートコードでどのルート表示するか指定します。 zoom int(11) yes NULL 地図の初期表示縮尺 travelmode varchar(10) yes NULL WALKING:徒歩(既定値)DRIVING：車BICYCLING：自転車TRANSIT：公共交通機関 maptypeid varchar(10) yes NULL ROADMAP:道路や建物などが表示される地図(既定値)SATELLITE：衛星写真HYBRID：ハイブリッドTERRAIN：地形情報地図 実際にはid以外ほぼNULLで使っています。 こんな感じ id zoom travelmode maptypeid K1 NULL NULL NULL YM1 NULL NULL NULL wp2_place(地点テーブル） 物理名 データ型 NULL 既定値 説明 name varchar(50) no なし 地点の物理名 title varchar(50) no なし Markerクリック時のポップアップウィンドウのタイトル latlang geometry no なし 緯度経度 description varchar(400) no なし Markerクリック時のポップアップウィンドウに表示する説明文 例： name title latlng description KAMAKURA_STATION Kamakura Station 'POINT(35.319264 139.550004)',0 Tour starts from here. HACHIMAN_GU Tsurugaoka Hachimangu Shrine 'POINT(35.326074 139.556485)',0 Built as a tutelary shrine for the Genji family in 1191. wp2_route(経路テーブル） 物理名 データ型 NULL 既定値 説明 index int(11) no なし インデックス（Auto_Increment） id varchar(5) no なし コースid name varchar(50) no なし 地点の物理名 order int(11) no なし 経路の順序 label varchar(10) no なし Markerに表示するラベル。"-b-"とすると経路を分割する marker tinyint(1) no 1 1:マップ上にMarker生成する、0:Marker生成しない skip tinyint(1) no 0 1:経路に含める,0:経路に含めない marker/skipの組み合わせでこんな感じになります。 marker skip 説明 1 0 (既定値)Marker生成して経路に含まれる 0 0 Markerなしの通過点となり、細かい経路設定が可能 1 1 Markerのみで経路に含まれない 0 1 この設定かつlabel="-b-"で分割に使用しています。 marker=0,skip=1の場合は最初使用しない組み合わせだったんですが、あとで経路を分割する必要が生じた際に使うことにしました。 例： index id name order label marker skip 1 K1 KAMAKURA_STATION 0 Start 1 0 2 K1 HACHIMAN_GU 1 1 1 0 3 K1 HASE_DERA 2 2 1 0 4 K1 GREAT_BUDDHA 3 3 1 0 正直、placeとrouteはテーブル分けなくても良かったなって後で思いました。使うときはJoinして使うし、メンテナンス性があんまり良くなくて。 courseテーブルもいらないっちゃいらなかったんですが・・・ functions.php WordPressに組み込むため、functions.phpを記述します。 最初はスクリプト登録用の手続き <?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') ); } function register_script(){ //　登録の項目 wp_register_script( 'maps', get_stylesheet_directory_uri() . '/js/maps.js', false, '', true); wp_register_script('googlemaps', '//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=en&callback=initMap', array('maps'), '', true ); } function add_script() { // 装備の項目 register_script(); wp_enqueue_script('maps'); wp_enqueue_script('googlemaps'); } add_action('wp_enqueue_scripts', 'add_script'); 次にマップ用の関数を作ります テーブルから情報とってきてformを生成しています。 YOUR_API_KEYにはGoogle Maps Api使用する際に必要なキーを取得して埋め込んでください。 // 地図用 function gmap($atts) { //ショートコードパラメータからコース名取得 extract(shortcode_atts(array( 'course' => 'undefined', 'height' => '480px', ), $atts)); if($course=='undefined'){ echo "[gmap course='???']course not defined"; return; } // wpdbオブジェクト global $wpdb; // ★デバッグ用 $wpdb->show_errors(); // コース取得用SQL $sql_course=$wpdb->prepare(" SELECT c.id, c.travelmode, c.maptypeid, c.zoom FROM wp2_course c WHERE c.id='%s' ",$course); // ルート取得用SQL $sql_route=$wpdb->prepare(" SELECT r.id, r.name, r.order, r.label, r.marker, r.skip, p.title, p.description, X( p.latlng ) AS x, Y( p.latlng ) AS y FROM wp2_route r JOIN wp2_place p ON r.name = p.name WHERE r.id = '%s' ORDER BY r.order ",$course); // クエリ実行 $rows_course = $wpdb->get_results($sql_course); if($rows_course){ $rows_route = $wpdb->get_results($sql_route); if($rows_route){ $num = $wpdb->num_rows; echo <<< EOM <form id="{$wpdb->id}"> <input type="hidden" id="count" value="{$num}" /> EOM; foreach($rows_course as $row_course){ if($row_course->travelmode!=null){ echo "<input type='hidden' id='travelmode' value='{$row_course->travelmode}' />"; } if($row_course->maptypeid!=null){ echo "<input type='hidden' id='maptypeid' value='{$row_course->mapTypeId}' />"; } if($row_course->zoom!=null){ echo "<input type='hidden' id='zoom' value='{$row_course->zoom}' />"; } } $index=0; foreach($rows_route as $row ){ echo <<< EOM <input type="hidden" id="p{$index}-label" value="{$row->label}" /> <input type="hidden" id="p{$index}-title" value="{$row->title}" /> <input type="hidden" id="p{$index}-latlng" value="{$row->x}, {$row->y}" /> <input type="hidden" id="p{$index}-description" value="{$row->description}" /> EOM; if($row->marker==0){ echo <<< EOM <input type="hidden" id="p{$index}-marker" value="{$row->marker}" /> EOM; } if($row->skip==1){ echo <<< EOM <input type="hidden" id="p{$index}-skip" value="{$row->skip}" /> EOM; } $index=$index+1; } echo "</form>"; // echo "<div id='map' style='height: 480px'></div>"; } } return "<div id='map' style='height: {$height}'></div>"; } 最後にショートコードを追加します。 add_shortcode('gmap', 'gmap'); 使い方 WordPressダッシュボードのPagesでPageを作成し、本文に [gmap course="K1"] というふうに記述します。 ここで"K1"はコースidで設定したものを指定します。

はじめに 自分用にコピペできるように残しておく 連続したある期間の日付をテストデータに使いたかったのが始まり 環境 MySQL　バージョン忘れた 参考サイト やり方 TEST_TABLE_1 にTEST_TABLE_2からデータを持ってきつつ、連続した日付になるようなデータにしたい。 まず結果から、 SET @start_day = '2021-01-01'; #期間の始め SET @end_day = '2021-02-01'; #期間の終わり INSERT INTO TEST_TABLE_1 (COLUMN_1, COLUMN_2, DATE_1) SELECT TEST_TABLE_2.DATA_1 #TEST_TABLE_2からデータを持ってくる ,TEST_TABLE_2.DATA_2 #TEST_TABLE_2からデータを持ってくる ,TEST_DATE.DAY FROM TEST_TABLE_2 INNNER JOIN ( SELECT DATE_FORMAT(DATE_ADD(@start_day, INTERVAL tmp.series DAY), '%Y-%m-%d') AS DAY FROM ( SELECT 0 series FROM DUAL WHERE (@num:=-1)*0 UNION ALL SELECT @num:=@num+1 FROM `information_schema`.COLUMNS ) AS tmp HAVING DATE_FORMAT(day, '%Y-%m-%d') < @end_day ) AS TEST_DATE ; こんな感じでいけた。 登録されるデータはこんな感じ DATA_1,DATA_2,2021-01-01 DATA_1,DATA_2,2021-01-02 : DATA_1,DATA_2,2021-01-30 DATA_1,DATA_2,2021-01-31 TEST_DATEについて、 SET @start_day = '2021-01-01'; #期間の始め SET @end_day = '2021-02-01'; #期間の終わり SELECT DATE_FORMAT(DATE_ADD(@start_day, INTERVAL tmp.series DAY), '%Y-%m-%d') AS DAY FROM ( SELECT 0 series FROM DUAL WHERE (@num:=-1)*0 UNION ALL SELECT @num:=@num+1 FROM `information_schema`.COLUMNS ) AS tmp HAVING DATE_FORMAT(day, '%Y-%m-%d') < @end_day ; この結果がこれ day ---------- 2021-01-01 2021-01-02 : 2021-01-30 2021-01-31 まとめ バージョンによっては警告がでるかも。（テストに使うデータを作成するだけなので無視でOK） 以上

CREATE TABLE CREATE TABLE IF NOT EXISTS users( id BIGINT UNSIGNED PRIMARY KEY AUTO_INCREMENT, name varchar(30) NOT NULL, created_at timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, updated_at timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ); ALTER TABLE カラム追加 ALTER TABLE users ADD COLUMN カラム名 INT UNSIGNED NOT NULL; -- 複数追加 ALTER TABLE users ADD COLUMN カラム名 INT UNSIGNED NOT NULL COLUMN カラム名 VARCHAR(255); FOREIGN KEY追加 ALTER TABLE users ADD COLUMN usersの参照元にするカラム名 INT UNSIGNED NOT NULL ADD CONSTRAINT フォーリンキー名 FOREIGN KEY (usersの参照元にするカラム名) REFERENCES 参照するテーブル (参照するテーブルのカラム) ON DELETE CASCADE ON UPDATE CASCADE; カラム削除 ALTER TABLE users DROP COLUMN カラム名; -- 複数削除 ALTER TABLE users DROP COLUMN カラム名, DROP COLUMN カラム名; FOREIGN KEY削除 ALTER TABLE users DROP CONSTRAINT フォーリンキー名 FOREIGN KEY (usersの参照元にするカラム名) REFERENCES 参照するテーブル (参照するテーブルのカラム) ON DELETE CASCADE ON UPDATE CASCADE DROP COLUMN usersの参照元にするカラム名 INT UNSIGNED NOT NULL; ;