MANPでローカル環境で構築したwordpressで、<a>タグで画像リンクが貼れない。また、ローカル環境のアドレスを変更したい。

###■はじめに
閲覧頂き、ありがとうございます。
普段はデザインをメインにやっておりまして、コーディング・サーバーについての知識が乏しく、詰まってしまったので質問させてください。

###■やっている事
現在MANPを使用し、wordpressをローカル環境でテンプレート構築しております。

###■やりたい事
・<a>タグで画像をクリックした時にページ推移するリンクを貼りたい
・ある程度構築してしまったローカル環境のアドレスをhttp://localhost:8888/→http://localhost/の形に変えたい。

###■<a>タグのソース

【header.php】

→結果：うまく飛ばない

###■試した事

まず、<a>タグは、topページのアドレスをwordpressのテンプレートタグで呼び出さなければダメなのか？と考えました。
下記のように記述をしてみましたが、ダメでした。

【header.php】
<a href="<?php echo home_url( '/' );?>">
<img class="header__logo" src="<?php echo get_template_directory_uri(); ?>/svg/logo.svg" alt="ロゴ">
</a>

できない原因として、アドレスをうまく呼び出していないのかな？と思いました。
ローカルの名前がhttp://localhost:8888/となっており、ホスト名？が8888だと問題なのかな？と思い、
→ http://localhost/の形に変えた方がいいのかな？と考えました。

こちらのサイトを参考に、設定をしてみましたが開かなかったので、書き換えたところを一旦戻し、最初の状態にしました…。
https://www.allinthemind.biz/design/mamp/httplocalhost8888_httplocalhost.html

次に、wordpressのサイトURLの設定がこのままだと開かないのかな？と思いましたが

どのアドレスに変更したらいいのかいまいちわからず…。
http://localhost/wordpress/　でしょうか…？
もし変更してしまって、この設定ページが開かなくなってしまったらと考えると変更できずにいます…。
wordpressアドレス(URL)と、サイトアドレス(URL)の違いもいまいちわかりません。

wordpressをインストールする前にMANPの設定をしておくという記事はたくさんあるのですが、
ある程度構築してしまったものをMANPサーバーホストを変更し、wordpress側のアドレスも変更する、で動くようになるのでしょうか？？

長々とわかりにくい説明で申し訳ありません
何か不足情報がありましたら教えてください。。
構築に関して本当に素人で、聞ける人も周りにおらず、とても困っております。。
もしお分かりになる方がいましたら、何卒教えていただけますと助かります。

Takumiboo

2019/12/12 04:38

「うまく飛ばない」とは何でしょうか。何かエラーが出るのでしょうか。その時のURLはどうなっているのでしょうか。

ruipoyo

2019/12/12 07:47

takumiboo様ご質問確認いたしました。貴重なお時間を裂いていただきありがとうございます… <a>タグで囲んだURLは、googleの検証機能で確認したところマークアップはされているようなのですが…。画像の部分をクリックしても何も起きません。index.php？のページに戻る反応もありません。（画面推移も反応も全くなし）

Takumiboo

2019/12/12 07:54

とりあえずサイトのURLの設定やポート番号の設定は関係なさそうですね。

ruipoyo

2019/12/12 08:08

takumiboo様ありがとうございますということはやはり<a>タグのマークアップが何らかの形で動いていないということですよね…。

Takumiboo

2019/12/12 09:03

切り分けとして例えば、「<a href="https://example.com/">」などにしても同じですかね？

ruipoyo

2019/12/12 10:30

何度も申し訳ありません… 本当にありがとうございますご指摘の通り、<a href="https://example.com/">に書き換えてみました。すると　chromeの検証画面では、 <a href="https://example.com/"> 　<img class="header__logo" src="http://localhost:8888/wordpress/wp-content/themes/faith_creative/svg/logo.svg" alt="ロゴ"> </a> と、書き換えたURLを表示してくれましたですが、ロゴ画像をクリックしてもリンクされず、次のページに推移することができません。 SVG画像を配置しているからでしょうか？？ aのサイズは0×0と表示がありました他の方のアドバイスを参考に、試しに別のテキストのリンク部分で <a href="<?php echo esc_url( home_url( '/' ) ); ?>">テキスト</a> を試したところ、きちんと推移させることができました。おっしゃる通り、サイトのURLの設定やポート番号の設定は関係ありませんでした！

Takumiboo

2019/12/12 14:05

a要素のサイズが0x0になっているのが原因っぽいですね。例えばa要素にdisplay:inline-block;を当てたらどうなるでしょう。

ruipoyo

2019/12/13 01:50

>> 例えばa要素にdisplay:inline-block;を当てたらどうなるでしょう。やってみましたができませんでしたアドバイスを頂いたので、svgのリンク挙動について調べてみましたが、貼り方にもいくつか種類があるみたいですね。お恥ずかしながら初めて知りました。インラインで指定すると長くなってしまうので、imgとして貼りたいのですが、その場合は<object>として読み込ませると良い…など出てきました。その手順通りにやってみたのですがやっぱりうまくいきません。もう少し色々試して検証してみます！ありがとうございます！

ruipoyo

2019/12/16 05:38

色々と検証した結果、マークアップについての問題は解決いたしました。 <a>そのものが原因ではなく、positionとグローバルメニューの体裁関係を修正することできちんとリンクを飛ばすことができました！ Takumiboo様、ご丁寧に相談に乗ってくださり、本当にありがとうございました！！

行動規範の内容に同意します

回答2件

<a>タグリンクの修正

テンプレートタグを下記に修正されてみてはいかがでしょうか？
WordPress Codexにある記述方法と異なっている様です。

header.php

<?php echo home_url( '/' );?>

↓

<?php echo esc_url( home_url( '/' ) ); ?>

参考：テンプレートタグ/home url
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/home_url

投稿2019/12/12 08:55

hogeniho

総合スコア58

ruipoyo

2019/12/12 10:23

お忙しいところ、本当にありがとうございます。ご指摘の通り、 <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <img class="header__logo" src="<?php echo get_template_directory_uri(); ?>/svg/logo.svg" alt="ロゴ"> </a> に変更をしてみました。すると　chromeの検証画面では、 <a href="http://localhost:8888/wordpress/"> <img class="header__logo" src="http://localhost:8888/wordpress/wpcontent/themes/faith_creative/svg/logo.svg" alt="ロゴ"> </a> と、正しいURLを表示してくれました！ …が、ロゴ画像をクリックしてもリンクされず、次のページに推移することができません。。。試しに別のテキスト部分で <a href="<?php echo esc_url( home_url( '/' ) ); ?>">テキスト</a> を試したところ、きちんと推移させることができました！ SVG画像を配置しているからでしょうか？？何かヒントがあれば、教えていただけますと大変助かります…

行動規範の内容に同意します

8888というのは、ポート番号と言う通信の識別番号とお考え下さい。

localhostと言うのも、デフォルトの80番ポートを使用しているのでlocalhost:80と同義です。

参考に挙げられたページのhttpd.conf でのListenとServerNameも変更して、http://localhost/wordpressでアクセス出来るようなら、
この後に、サイトURLとwordpressURLをhttp://localhost/wordpress/に変更してご確認下さい。

投稿2019/12/12 03:33

編集2019/12/12 04:17

madone99

総合スコア1857

ruipoyo

2019/12/12 08:07

madone99様ご回答ありがとうございます　貴重なお時間をありがとうございます参考サイトの通りにやってみましたが、うまく変更ができませんでした。 >>localhostと言うのも、デフォルトの80番ポートを使用しているのでlocalhost:80と同義です。そうだったのですね！少し概念がわかりました他のサイトも探しながらもう一度URL変更のところは挑戦してみます。。

madone99

2019/12/12 08:25 編集

WordPressアドレス(URL) は、WordPressをインストールした場所（フォルダをクリックすると、中身にwp-adminやwp-contentのある場所です。多分http://localhost/wordpressでしょう。）サイトアドレス(URL) は、WordPressを表示したいアドレスです。 http://localhostであれば、http://localhostに http://localhost/wordpressなら、http://localhost/wordpress にする必要があります。

ruipoyo

2019/12/12 10:13

ご丁寧にありがとうございます試してみた結果、どうしてもURLをうまく変更することができませんでした。 ①ApacheとMySQLのポート番号の変更はできました。 ②httpd.conf でのListenとServerNameの変更もできました。しかし、MANPのページの、「MY website」からクリックすると →　「Index of /」　　「wordpress/」とブラウザに表示され（アドレスはhttp://localhost:8888/） →「wordpress/」をクリックするとアドレス→　http://localhost:8888/wordpress/　のページに飛んでしまいます。正解が　「http://localhost/wordpress」のはずなので、やっぱりうまくできていないということですよね…。本当に何度も何度も申し訳ありません… <a>タグが機能すれば最悪、ローカルのアドレスは変更しなくても良いのですが… でも今後のために成功させておきたいなと思っております…

madone99

2019/12/12 10:50 編集

惜しいところまで来ていると思います。コメントを拝見すると最終的にはこの形で良いのでしょうか？ http://localhost:8888/→http://localhost/ httpd.confに「DocumentRoot」からはじまる行がないでしょうか？そこを以下のように変更して頂いて（実際のwordpressまでのパスに修正して下さい） DocumentRoot "/Applications/MAMP/htdocs/wordpress" その後、いったんMAMPを終了してから、もう一度起動してみて下さい。

ruipoyo

2019/12/13 00:57

>>コメントを拝見すると最終的にはこの形で良いのでしょうか？ http://localhost:8888/→http://localhost/ そうです！わかりやすくその形にしたいなと思っております… ----- httpd.confを、 DocumentRoot "/Applications/MAMP/htdocs/wordpress"　に書き換えてみましたサーバーを再起動して、MANPのトップページにとんだときのURLが、 http://localhost/MAMP/?language=English　になっており、多分成功？していますよね！？しかしそこから、「MY website」をクリックするとhttp://localhost:8888/に飛んでしまいました。 ■http://localhost:8888/　の表示エラーこのサイトにアクセスできません localhost で接続が拒否されました。 localhost 8888 を Google で検索してください ERR_CONNECTION_REFUSED 次に、最初に御教授いただいた、 >>http://localhost/wordpressでアクセス出来るようなら、この後に、サイトURLとwordpressURLをhttp://localhost/wordpress/に変更してご確認下さい。とのことでしたので、現段階で「http://localhost/wordpress」にも推移することができませんでした。表示されるエラーは下記の通りです。 Internal Server Error The server encountered an internal error or misconfiguration and was unable to complete your request. Please contact the server administrator, you@example.com and inform them of the time the error occurred, and anything you might have done that may have caused the error. More information about this error may be available in the server error log. wordpress側のサイトURLとwordpressURLはまだ初期状態のままにしてあります。（変えてしまって見れなくなったら怖いなと思い…） ★面倒なご質問に丁寧にご回答いただいて本当にありがとうございます…。

madone99

2019/12/13 01:33 編集

そうしますと、http://localhost:8888/へ行くことから httpd.confのListenから始まる行がListen 8888になっていないでしょうか？もしそうならListen 80へ変更してMAMPを終了してから、もう一度起動してみて下さい。また勘違いしていたのですが > http://localhost/wordpressでアクセス出来るようなら、 > この後に、サイトURLとwordpressURLをhttp://localhost/wordpress/に変更してご確認下さい。こちらは、http://localhost/へアクセスできるようにしたいとのことですのでサイトURLとwordpressURLは、http://localhost/になります。

行動規範の内容に同意します

あなたの回答