質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.59%

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

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,024

score 6

■はじめに

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

■やっている事

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

■やりたい事

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

■<a>タグのソース

【header.php】
<header class="header">
<a href="http://localhost:8888/wordpress">
<img class="header__logo" src="<?php echo get_template_directory_uri(); ?>/svg/logo.svg" alt="ロゴ"></a>
</div>

→結果:うまく飛ばない

■試した事

まず、<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側のアドレスも変更する、で動くようになるのでしょうか??

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Takumiboo

    2019/12/12 23:05

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

    キャンセル

  • ruipoyo

    2019/12/13 10:50

    >> 例えばa要素にdisplay:inline-block;を当てたらどうなるでしょう。
    やってみましたができませんでした

    アドバイスを頂いたので、svgのリンク挙動について調べてみましたが、貼り方にもいくつか種類があるみたいですね。
    お恥ずかしながら初めて知りました。

    インラインで指定すると長くなってしまうので、imgとして貼りたいのですが、その場合は<object>として読み込ませると良い…など出てきました。
    その手順通りにやってみたのですがやっぱりうまくいきません。

    もう少し色々試して検証してみます!ありがとうございます!

    キャンセル

  • ruipoyo

    2019/12/16 14:38

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

    キャンセル

回答 2

-1

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/12 19:41 編集

    惜しいところまで来ていると思います。

    コメントを拝見すると最終的にはこの形で良いのでしょうか?
    http://localhost:8888/http://localhost/

    httpd.confに「DocumentRoot」からはじまる行がないでしょうか?
    そこを以下のように変更して頂いて(実際のwordpressまでのパスに修正して下さい)

    DocumentRoot "/Applications/MAMP/htdocs/wordpress"

    その後、いったんMAMPを終了してから、もう一度起動してみて下さい。

    キャンセル

  • 2019/12/13 09: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はまだ初期状態のままにしてあります。
    (変えてしまって見れなくなったら怖いなと思い…)

    ★面倒なご質問に丁寧にご回答いただいて本当にありがとうございます…。

    キャンセル

  • 2019/12/13 10:25 編集

    そうしますと、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/になります。

    キャンセル

-1

<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 19: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画像を配置しているからでしょうか??
    何かヒントがあれば、教えていただけますと大変助かります…

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • PHPに関する質問
  • MANPでローカル環境で構築したwordpressで、<a>タグで画像リンクが貼れない。また、ローカル環境のアドレスを変更したい。