松村上久郎のブログ

ブログです。

HPをAdobe PortfolioからWordPress.orgに移行した苦労話

備忘録の記事が世界を救うし役に勃つっておじさん知ってるので、

HPをリニューアルした際に苦しんだことを備忘録として残しておこうと思います。

f:id:the338:20210323110944p:plain

↑訪れるたびに違う絵のお題を教えてくれるサイトを実装した!

 

 

 

困った点・詰まった点

1.そもそもwordpress.com と wordpress.org の違いに気づくのに時間がかかった

 →危うくwordpress.orgを使いドメイン+サーバー代で年5000円以下くらいで済みそうなところを.comのビジネスコースを使うことで年3万払う羽目になるところだった。やはり始める前に調べることは大切。

2.namecheapでドメインは買ってたけど、そこから「EasyWP」とか選んでしまい混乱を極めた

 →すぐやめた。最終的にnamecheapでサーバーも借り、そこにwordpressをインストールして編集することにした

3.wordpress.comからwordpress.orgに移行する際、HPで使っていたドメインからwordpress.comの空き地にリダイレクトされるのがうざかった

 →1日か2日でやっと収まった。wordpress.comのサーバーからnamecheapで借りたサーバーに移行するのに時間がかかっただけの話なのだがなんか疲れて草

4.テーマのヘッダーとフッターをどう消せばいいかわからなくて2日くらい使った

 →解決した。後述

 

以下思い出せる限り順番に喋るで。

 

 

1.wordpress.comとwordpress.orgの違い

前者が「サーバー借りるとか面倒なことは俺がやってやるから好きに作りなよ。あ、でもscriptとかあんま自由に使えねえから勘弁な。本当に自由にカスタムしたかったら年間三万円払ってな〜」って感じで、

後者が「ドメインとサーバーは自分で用意してセキュリティも自分でやるんやで。まあ別に難しくないよ。あとは好きにしな。金?特にいらないです」という感じ。

(参考にしたサイト WordPress.comとWordPress.orgの違いとは?

↑セキュリティ云々のやり方もここから辿れば一応できる感じなのでなんとかなったで。)

 

ドメインもサーバーもnamecheap(https://www.namecheap.com)ってとこで借りました。サイトは全部英語なんだけど、国内より安い。特にサーバーが安い印象。

f:id:the338:20210324140818p:plain

↑このweb hosting ってやつな。要するにレンタルサーバーはhostingっていうらしい。

年間固定費かかることを考えたら.comではなく.org一択なので、導入は割と面倒だったけどちゃんとやっておけばかなり助かる。英語の翻訳でわからんところはDeepLに突っ込んで対処。

 

(ところで海外ではレンタルサーバーのことをshared hostingっていうんだってさ。そういう言葉の違いにも若干翻弄されかけてわかりにくかったりしたけどわかればなんてこともないんやで)

ちな手順としてはサーバーレンタル→cPanelってとこ入って「wordpress」とか調べてインストール→あとはリンクからチョリチョリとカスタムするという感じだったでした。

 

 

2.サーバー借りる前、EasyWPとか選んで混乱した

wordpress簡単に始められるで〜」みたいなプランがnamecheapにあったので試しにやってみたら却って混乱したんよ。英語だから余計な。

ちゃんとHPカスタムしてやっていこうということなら別にEasyWPじゃなくって、普通にサーバー借りて普通にWPを別途インストールした方が余計な混乱はなさそうだなと思いました。まる。

 

3.wordpress.comからwordpress.orgに移行するのがまた面倒だった

わいwordpress.comでページを一回作ってみて、カスタムHTMLのところにscript入れてみたら弾かれて「?」ってなってから.orgの存在を知り、「.comだとscript走らんのよ〜ごめんな〜」っていうことをそこでまた知ったんよ。

なので一回.comで作ったのを消して.org行こうと思ったんやけど、.comの方のページを消した時に「じゃあ、uwa-aaa.comへのアクセスはuwaaaacom.wordpress.comにリダイレクトするようにしとくな〜親切やろわい?」って感じになってもうてな。

そうなるとあれなんよ。わい自分のHP編集するためにuwa-aaa.com周りにアクセスするたんびになんかwordpress.comの関係ないリダイレクトに飛んでしまって編集ページに飛べないんよ。

「わいは早く編集したいのに〜〜〜!!!うわちょり!!!」ってなってたんやけど、ドメインを管理するサーバーがwordpress→namecheapに変更されて反映されるまで時間がかかってただけでな。最終的にはちゃんと入れるようになったんよ。

こんなだったら最初から.comではなく.orgでやっておけばよかったな〜とか思ったけど、まあ何がなんなのか勉強になったからいいとしようと思ったわけなんや。年額も払わなくて済んだしな〜。

わいは「訪れるたびに絵のお題を教えてくれるサイト」っていう簡単なのが作りたかっただけだったんやけど、結局scriptが動かんとできなかったりcsvファイルとかアップできないといけないので(.commだとcsvファイルがサポートされていない)それさえもできなかったんよな。

なので、ほんの簡単な仕掛けのサイトが作りたい場合でも面倒臭がらずちゃんと.orgを導入してしまった方が自由やし、何より固定費が安く済むと思うのでいいと思ったでしたやで。

 

 

4.テーマのヘッダーとフッターをどう消せばいいかわからなくて2日くらい使った

で、色々あって簡単な仕掛けだけはネットで調べてぺたぺたしてゴリ押しで作れたんやけど、

デフォルトで用意されてるヘッダーとフッターがどうしても消せなくて1日ほど詰んだんよ。

f:id:the338:20210324140556p:plain

↑上の小文字と下のでかい色枠の部分。全部消したいがなかなかできなかった。

wordpressの画面の「固定ページ編集」とか「テーマ→カスタマイズ」とかを探っても「ヘッダーを非表示」みたいな気の利いたボタンは見当たらんわけです。

解決としては、外観→カスタマイズ→追加CSSってとこにこんなのを書き足すわけなんよ。

 

header.pagelayer-header {display:none;}

footer.pagelayer-footer{ display:none;}

 

これを追加CSSってとこに書き足したらヘッダーとフッターが消し飛んだので大満足。

ちなみに選んでるテーマは「blank canvas」っていうやつ。一番真っ白。

おそらく選んでいるテーマによってheader.〇〇{display:none}の〇〇の部分の名前が違うので、テーマが変わったらここも変えてやらねばならんのかもしれん。

わいはこの〇〇の部分がわからなくて困ったんやけど、

safariで上のメニューバーから開発→Webインスペクタを表示→「要素」ってやつを選ぶ(小さくてわかりづらい)と。(開発ってのが表示されてない場合、環境設定の「詳細」から「メニューバーに「開発」を表示」ってやつにチェックな)

 

f:id:the338:20210324142222p:plain

小さいけど、これの一番左。

 

コードにマウスを合わせるとそのページの該当箇所をぴこぴこ表示してくれるので、ヘッダーとフッターの該当箇所を探すわけなんよ。そしたら

<header class="pagelayer-header">...</header>

みたいな箇所が見つかると思うんやけど、このclass=" "の中身がheaderさんのそのページでの名前らしい。知らんけど。

なので、これを適宜変更して、あとは{display:none;}って足してあげればええわけやな。

知らんけど。

 

 

まとめ

htmlの知識もcssの知識もなかったけど、作りたいHPの形がはっきりしていたら割と検索からのゴリ押しでいけるで。知らんけど。

あとこれから独立して自分のHP作るっていう人たちはちゃんと固定費を減らせるようによく調べるんやで。わいは色々混乱して若干無駄金が飛んでもうたけど、勉強代と思って頑張るで。

ほな。