プログラミングの超初心者だったにもかかわらず、Wordpressのテーマ化に挑戦。
ローカル環境では何の問題もなかったのに、サーバーの引っ越しをした途端に、問題が発生してしまいました。
移転後のテーマ編集なんて、どうすればいいかわからないし…。
結局、テーマ化を一からやり直す羽目になった私…。
今回の記事は、サーバー移行後の問題の中でも「アンカーリンク(a href)が効かなくなる」問題についての覚え書きです。
WordPressのテーマ化(オリジナルテーマの作成)に挑戦する初心者の人には一読をお勧めします。
他ページへのリンク
他ページへのアンカーリンク(a href)が効かなかった原因は「TOPへ戻るボタン」でした。
Javascriptで実装した場合も、ローカル環境でプラグインを入れた場合も、どうやらこのボタンが他ページへのリンクに干渉してしまうようです。
解決策:
- ローカルサーバーを利用している時(移行前)には「TOPへ戻るボタン」を設置しない。
- どうしても「TOPへ戻るボタン」を入れたい場合は、サーバーの移行後にプラグイン(私は「WPFront Scroll Top」を使用)で対応する。(試していないので、移行後に問題が起こるかどうかはわかりません。)
- 移行後のサイトで、移転前に導入していた「TOPへ戻るボタン」のプラグインを無効化する。
これで「TOPへ戻るボタン」は使えなくなりましたが、リンクは問題なく効くようになります。
2月2日追記
その後、再度プラグインを有効化したところ、「TOPへ戻るボタン」も使えるし、他のページへのリンクも効いたままでした。
ページ内リンク
同じページ内の別の項目にアンカーリンクが効かなかった原因は、h2やh3といった「見出し」にアンカーリンクを設定していたからのようです。
解決策:「見出し」そのものにリンクを付けるのではなく、直前にリンクを設定する。
(変更前)
クリック元
<li class=”header-nav-list-item”>
<a href=”#acs”>ACCESS</a>
</li>
ジャンプ先
<section id=”acs” class=”top-acs”>
(変更後)
クリック元:変更なし
ジャンプ先
<div id=”acs”></div>
<section class=”top-acs”>
最後に
プログラミングの超初心者がWordpressのテーマ化を試して実感したこと。それは、
ノーコードのサイト制作は最強だ!
でした。
確かに自作のオリジナルテーマを使えば、自分の好きなようにカスタマイズすることができます。けれど、プログラミング(コーディング)についてたった1か月、しかも動画で学習しただけの超初心者が、満足のいくオリジナルテーマを作り、しかもそのテーマを編集したり、更新したりするのは至難の業です。
実際、有料にしろ、無料にしろ、WPの既存のテーマを利用して、プラグインを導入し、ちょっとしたデザインなら外観→カスタマイズするほうが、よっぽど自分好みのサイトができるのではないでしょうか。
私のコーディングの知識やスキルは、オンライン講座(動画視聴がメイン)から得たものです。サイト制作を仕事にできたら…と、ハローワーク経由で受講した講座でしたが、動画を見るだけではやはりかゆいところに手が届かないというか、問題が起きても、すぐに解決できなくて大変でした。(審査に受かれば無料で受講できるという講座なんで、ケチをつけたらバチが当たります。)
なので、完全カスタマイズも含むサイト制作を仕事にしたいと思っている人には、プログラミングスクールでの学習をお勧めします。
- 0円スクール:最低3か月でプログラマーを目指せるエンジニア養成スクールです。現場目線のカリキュラムを使用し、個別指導による講師のサポートも徹底しています。
そして実力が身についたら、次はお仕事探しです。
ITフリーランス向け案件ダイレクトスカウトサイト【xhours】は、ITフリーランス向けのダイレクトスカウトサイトです。
希望条件を登録するだけで、あなたに興味をもった企業から条件にマッチした案件スカウトが届きます。案件の検索・応募も可能です。
日本最大級のオンラインお仕事マッチングサイトCrowdWorks(クラウドワークス)では、サイト制作の仕事を始め、200種類以上のお仕事とのマッチングが可能です。
ユーザー数は443万人と業界No.1。テレビや新聞でも話題沸騰のCrowdWorks(クラウドワークス)なら、登録しておいて損はありません。
もしまだなら、知名度の高いココナラ もお勧めです。
\このブログがお役に立ったなら/