xamppでいうとhtdocs＞wordpressのwordpressディレクトリをなくせばいいとも言えますが、それだとファイルの整理ができなくなったりするので、それは避けたいところです。

ファイルの作成

wordpressディレクトリの一つ上の階層内にindex.phpファイルを作成し、以下の内容をコピペします。

<?php
/**
 * Front to the WordPress application. This file doesn't do anything, but loads
 * wp-blog-header.php which does and tells WordPress to load the theme.
 *
 * @package WordPress
 */

/**
 * Tells WordPress to load the WordPress theme and output it.
 *
 * @var bool
 */
define('WP_USE_THEMES', true);

/** Loads the WordPress Environment and Template */
require('wordpress/wp-blog-header.php');
?>

管理画面での設定

左カラムのメニューから設定をクリック。
以下の画像のように太線箇所のURLからwordpressを消して『変更を保存』をクリック。

これで、URLの変更完了です。
※管理画面のアクセスURLは変更されません

ウイジェット

左カラムのメニューから外観＞テーマをクリック。
ウィジェットカスタムHTMLをHome Main Content Areaにドラッグ＆ドロップ。
タイトルを入力し、内容にGoogleマップのソースコードを入力。

コード例

<div id="access" class="google-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12845.407724606186!2d136.4522403!3d36.4006797!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf5d48cea6ad0cde4!2z44Kr44OW44OD44Kt44O844Op44Oz44OJ!5e0!3m2!1sja!2sjp!4v1541234326475" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

コードの取得は以下のページを参考にしましょう。

講義

2019.5.30

WEB制作していく上で重要なGoogleサービス【初級第3回】

現在、Googleは様々なWEBサービスを打ち出しています。 これらサービスは、絶対必要なものからあったら便利だなというものまで様々です。 当講義では、その中でも重要なサービスを取り上げ、WEBサイトへの利用方法を紹介します。

CSS

Googleマップの表示縦幅を調整するためにCSSを追加します。
wordpress＞wp-content＞themes＞restaurant-recipe-child＞style.cssを開いて以下の記述を追加します。

/*map*/
.google-map {position: relative; width: 100%; height: 0; padding-bottom: 30%; overflow: hidden;}
.google-map iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@media only screen and (max-width: 767px) {
    .google-map{padding-bottom: 120%;}
}

padding-bottomの数値で縦幅が変更されます。
デザインに見合った縦幅に変えていきましょう。

パンくずリストとは？

パンくずリストとは、Webサイトを訪れたユーザが今どこにいるかを視覚的にわかりやすくした誘導表示のことを言います。
基本的にWebページの階層順にリンクがリストアップされており、Webページの上部箇所に表示されているケースが多いです。

上記の通り、複数ページにまたがるサイトを制作する際には必須の表示になります。
当テーマでも設定を行う事により表示されますので、方法を紹介します。

テーマカスタマイズからの設定

左カラムのメニューから外観＞カスタマイズをクリック。
カスタマイズ画面に遷移したらTheme Options＞Breadcrumb Optionsをクリック。
セレクトボックスをBreadcrumb Navxtに選択し、『公開』をクリック。

これで、パンくずリストが表示されるようになりました。

パンくずリストプラグイン「Breadcrumb NavXT」の設定

表示してみるとわかるように、パンくずリストのの先頭にはサイト名が設定されています。
これだとサイト名が長かった場合にデザインが崩れたり、面倒が多くなるので、その表示箇所を修正します。

左カラムのメニューから設定＞Breadcrumb NavXTをクリック。
設定画面に遷移したらホームページテンプレートの枠を編集します。

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Go to %title%." href="%link%" class="%type%" bcn-aria-current><span property="name">%htitle%</span></a><meta property="position" content="%position%"></span>
↓
<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Go to %title%." href="%link%" class="%type%" bcn-aria-current><span property="name">Home(ここを自由に変更)</span></a><meta property="position" content="%position%"></span>

来週はコース最終回となりますので、サーバーにアップして公開したうえで完成とすること魯まで行います。