フロントページ以外にアクセス・店舗案内を表示する
2017年6月6日
2018年6月2日
カスタマイズ
カスタマイズ

フロントページ以外にアクセス・店舗案内を表示するHTMLコードを紹介します。
アクセス・店舗のご案内表示HTMLコード
以下のHTMLコードを記事内に貼り付けていただくと、
アクセス・店舗案内を表示させることができます。
テキストの部分を書き替えて使用してください。
<h2>店舗営業時間のご案内</h2> <div class="info"> <p style="margin:0"><i class="fas fa-home"></i> 東京都千代田区丸の内1丁目</p> <p style="margin:0" class="tel alignright"><i class="fas fa-phone"></i> 123-4567-8910</p> </div> <table class="time"> <tr class="title"> <th colspan="3">営業時間</th> </tr> <tr> <th></th> <td>9時~12時</td> <td>13時~19時</td> </tr> <tr> <th>月</th> <td>〇</td> <td>〇</td> </tr> <tr> <th>火</th> <td>〇</td> <td>〇</td> </tr> <tr> <th>水</th> <td>〇</td> <td>〇</td> </tr> <tr> <th>木</th> <td>〇</td> <td>〇</td> </tr> <tr> <th>金</th> <td>〇</td> <td>〇</td> </tr> <tr> <th>土</th> <td>〇</td> <td>〇</td> </tr> <tr class="last"> <th>日</th> <td>×</td> <td>×</td> </tr> </table> <h2>店舗までのアクセス</h2> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.825343288038!2d139.7640582155859!3d35.681302337574834!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1466078460687" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
デザインは以下のようなイメージになります。
店舗営業時間のご案内
東京都千代田区丸の内1丁目
123-4567-8910
営業時間 | ||
---|---|---|
9時~12時 | 13時~19時 | |
月 | 〇 | 〇 |
火 | 〇 | 〇 |
水 | 〇 | 〇 |
木 | 〇 | 〇 |
金 | 〇 | 〇 |
土 | 〇 | 〇 |
日 | × | × |
店舗までのアクセス
すべての記事下に一括表示する場合
投稿ごとではなく、すべての記事下に一括表示させたい場合は、
[記事下コンテンツ]ウィジェットを使ってください。
毎回記事を書くたびにコードを入力しなくても、
自動で記事の最後に店舗情報が表示されるようになります。
![テキスト(旧タイプ)を[記事下コンテンツウィジェット]に入れてHTMLコードを記入します](https://healer.lognote.biz/wp-content/uploads/2017/06/access-html-code-01.jpg)
テキスト(旧タイプ)を[記事下コンテンツウィジェット]に入れてHTMLコードを記入します
【テキスト】だとGoogle Mapがキチンと表示されないので、必ず【テキスト(旧タイプ)】を使用してください。