Webサイト制作

「実装できたらフリーランスになれるかも?」WordPressのカスタマイズ事例を紹介します。

●11/14追記
「★★」が先頭に書いてあるものが追記したものになります。

●11/11追記
この記事で紹介した案件が無事に公開を迎えました。「★」が先頭に書いてあるものが追記したものになります。

こんにちは。のぶ(@n0bu0810)です。

ワードプレスで一番使う機能といえば【ブログ機能】なのではないでしょうか。さまざまなデザインの無料テーマが用意されており、その無料テーマを使えばあとは記事を書くだけ。

というのは記事を書く人の立場。

Webエンジニアであれば、作る側に回ります。無料テーマを導入して納品したけれど、顧客からの要望に対して【このテーマではその機能は実装できません!】という返事はださすぎますよね。

無料テーマを導入してプラグインを入れればいいのかもしれないですが、自由にカスタマイズをできるようにするのであれば、一から自分自身で実装した方が予期せぬエラーとも戦わないですむはずです。

先日ブログ記事を表示させる様々なことを実装する機会がありました。
というわけで今回はhtml(静的)で出来上がったサイトをphpとワードプレス(動的)に作成するために行ったことを箇条書きになりますが、記載していきます。

これらを対応することができたら、自身でカスタマイズできてフリーランスになれるかも?

WordPressのカスタマイズ【データベースやサーバー周り編】

  • https://changethejob.comのサーバー契約をxserverに変更したい。データをxserverに移してください。
  • https://changethejob.com/だと不正に管理画面にログインされる可能性があるので、https://changethejob.com/wp-sample/に管理画面を置いてください。
  • Xserverでオリジナルのメールアドレスを作成してください。
  • ブログの投稿のposttypeをsampleとしてください。
  • https://changethejob.com/ではなく、https://changethejob.com/sample/を表示させたいからリダイレクトがかかるようにしてください。
  • 会社用と顧客用と2つのbasic認証を設定してください。
  • ★本番環境でしっかりと表示されるか確認をしたいので、hostsを設定して正常に表示されるか確認してください。
  • ★ムームードメインからxserverにDNSを移動させてください。
  • ★”http”でアクセスがあったときに”https”にリダイレクトするように.htaccessにコードを追記してください。→記事で確認する。

WordPressのカスタマイズ【ブログ機能(表示編)】

  • ブログ記事一覧のサイドメニューは、カテゴリー一覧と月別のアーカイブ一覧を表示されるようにしてください。
  • 記事一覧ページのページ上部には顧客が選択したオススメ記事が出力されるようにしてください(出力される記事は全部で15記事。表示は3記事ずつ)。
  • 選択されたオススメ記事が3枚1組となるように設定してください。記事と連動して動くUIも一緒に表示されるようにしてください。左右に動かせるボタンも設置してください。スライドショーの作成をお願いします。
  • 既存のサイトですでに登録されているサムネイル画像は、今後も同様に記事を引き続くので同じように出力されるようにしてください。
  • 投稿日時は2018/01/01と表示されるようにしてください。
  • 記事一覧ページに記事は4記事のみが表示されるようにしておく。この記事はfadeinで出てくるようにしてください。
  • 4記事以降は、【さらに記事を読み込む】というボタンをクリックすると追加で10件記事が表示されるようにしてください。
  • 記事一覧ページの各記事の周囲にbox-shadowをつけてください。hover時はopacityではなく、その影が消えるように各記事が動くようにしてください。
  • 記事一覧ページの下部にはpagenaviを設置してください。
  • 各記事にはfacebookとtwitterにシェアできるようにシェアボタンを設置してください。アイコンはオリジナルのものを使用します。
  • トップに戻るボタンを押したら時間をかけてスクロールするようにしてください。ページ内リンクも同様にゆっくりと指定の場所にスクロールするようにしてください。
  • ハンバーガーメニューにもページ内リンクのボタンを設置しているので、ページ内リンクをクリックしたらハンバーガーメニューは閉じるように設定してください。
  • 背景色は2色。左60%がaquaで右40%がpinkになるように設定してください。
  • 電話番号が記載されているところには、タップしたら電話がかかるようにしてください。
  • ★子カテゴリーがある際にカテゴリーの横に「+」ボタンを設置してください。その「+」を押すと子カテゴリーが表れるようにしてください。
  • ★posttypeの「sample」のパーマリンクが投稿タイプと同様(/ディレクトリ名/ID)になるように設定してください。
  • ★★パンくずリストに「TOP>親カテゴリー>子カテゴリー>記事タイトル」となるようにしてください。
  • ★★記事タイトルの下はカテゴリーが複数指定されていても、親カテゴリーのみ表示されるようにしてください。

WordPressのカスタマイズ【ブログ機能(管理画面編)】

  • カテゴリーは顧客で並び替えや追加編集ができるようにしてください。
  • 投稿記事変更画面からフォントファミリーが変更できないようにフォントファミリーを削除してください。
  • キャンペーン内容を1週間に1回変更したいので、キャンペーン内容が全ページに表示されるようにしてその内容を顧客が変更できるようにしてください。
  • ★これまで動いていたプラグインが動かなくなりました。その場合どのように対応すれば良いのでしょうか?
  • ★★SNSでシェアした時の”タイトル”,”ディスクリプション”,”画像”を登録できるようにカスタムフィールドを使って作成してください。

★この案件で必要なPHPファイルは何ですか?

まとめ

結構ざっくりになってしまいましたが、これらのことを実際に実装しました。調べればすぐに答えが出てくることもあれば、ググっても全然ヒットしないような内容の依頼内容もあります。

難しい部分はposttypeを指定した記事一覧画面に月別一覧のアーカイブを表示させることでした(date.phpでは表示されないはずです)。

スライドショーの3枚1組も強敵すぎます。既存のプラグインで実装できるプラグインってあるんですかね?提案の幅も広がるのでスライドショーも自作できる力をつけておいた方がいいのかなと思っています。

無料で使用できるテンプレートにもこれらの機能は当たり前のように入っているので、これぐらいは最低限求められる技術なのかもしれません。むしろこれぐらい実装できるのであれブログ機能がついたサイトをほぼほぼ実装できるのではないでしょうか?

簡単な案件から難しい案件までありますが、これぐらいの対応ができるのであればちょっとした修正ならすぐに終わるようになると思います。

今回答えや参考サイトを記載していないのは、私自身がまだまとめられていないからです。しっかりと復習してこの記事がコードで埋められていく日が来るかもしれません。

サイト作成で悩まれている方はこれらの機能を実装したりアレンジしたりサイト作成のサンプル実装としてご利用していただけたらと思います。

ほー
ほー
できるようになるまでは大変だけど、できたら楽しいですよね。ぜひぜひチャレンジしてみてください。