久しぶりのリニューアル。目的は2つありました。
個人的にはMovableTypeは、まっさらな状態からコーディングする身としてはとても扱いやすかったのですが、CMSを扱う案件の中では、少なくともここ3、4年、一度もMovableTypeを扱うことはなく、すべてWordPressでした。CMSを扱う新規案件では、まずWordPressで提案しています。
というわけで、このサイトもWordPressに移行することにしました。
このサイトは「Webサイト制作に関する情報」とい特性から、ほとんどのユーザーは平日の9:00から18:00まで、デスクトップによる利用がほとんどです。スマホが登場したときには、スキル試しということでWebレスポンシブにしていたのですが、それ以降のリニューアルでは、Webレスポンシブにはしていませんでした。
ただ、一つの制作サンプルとして、やはりWebレスポンシブ対応にした方がいいな、と対応し直すことにしました。
技術的なところでは、CSSで、単位は、vm と em を多用していることと、BEMのCSS設計を取り入れていることが特徴です。また、Gulpを導入することで、クロスブラウザ対応やファイルの軽量化を簡単に実現しています。
ローカル環境はMAMPで作りました。そこにWordPressをインストール。
MAMPをご存知ではない方、「ローカル環境MAMPにWordPressをインストール」という記事を書いていますのでよかったらそちらもチェックしてみてください。
管理画面の「ツール」→「記事のエクスポート」を選択します。これにはカテゴリ情報もコメント情報も含まれています。
MTの「本文」と「続き」が、WordPressでは「本文」にまとまるので注意です。必要に応じて、エクスポートしたテキストデータをCSSでレイアウト修正しやすいように、続きの前後にタグを追加しておくと便利です。
WordPressの「ツール」→「インポート」で、Movable Type と TypePad にある「インポーターの実行」を選択し、画面の指示に従っていくとファイルを選択する画面になるので、エクスポートしたファイルを選択します。
たったこれだけでほぼ完了!残りは、各ページのURLをリニューアル前後は同じにすること。このサイトの場合を例に対応したことのメモです。
このサイトの場合は、このサイト専用にテーマごと作成。ファイル構成は、トップ、カテゴリ一覧、検索結果ページ、記事ページ、固定ページ、エラーページというシンプルな構成で共通要素も多く、凝った仕様にしていないため、自由自在にできました。
ローカル環境で一通りの制作が完了したら、いよいよ本番反映です。ただし、いきなり本番反映は危険です。今回は新規DBにデータ移行も関わるので、閲覧できなくなる時間も発生してしまいます。そこで、本番環境にステージング用のドメインを用意し、そちらにローカル環境と同じものを構築します。
一旦、本番を参照先をステージングにすることで、もし問題が起きてもすぐに差し戻せるようにすることができます。その際に、管理画面の「設定」→「一般」のアドレス(URL)をステージングから本番に変更します。変更することで管理画面は見れなくなりますが、本番の参照先を認識するまでの間です。本番に参照先が変更され、問題ないことが確認できたら、ステージング用のドメインを削除して終了です。
コメント通知が有効にならない。結局、これはgmailではないメールアドレスを設定することで解決したのですが、根本的な原因は今も分かっていません、、。ここだけで2、3時間ハマってしまった、、、無念。
それ以外は元々はシンプルな構成であることが幸いして、すんなりWordPress化、Webレスポンシブ対応することができました。
ソフマップで、MacBook Air Mid 2013 を中古で購入した。なつかしのOS X Lion。だがしかしッ!工場出荷時に初期化してアップデートしよう・・・
外部のAPIを利用する際、リクエスト回数が制限されることがある。また、リクエスト回数が制限され、かつ毎日更新をルールとする外部のAPIもある。 そんなと・・・
インスタに投稿した画像を自動でホームページでも更新されるようにしたい。もっとも簡単に実現する方法を紹介する。 公式リファレンスInstagram・・・
このたび、ハンドメイドアクセサリー作家さんのWebサイト制作させていただきました! Sunny Side Accessory(サニーサイド アクセサリー・・・
5年くらい前に購入した書籍「インタラクションデザイン」。この書籍内ではたくさんの事例が紹介されている。残念ながらその多くは現在閲覧することができなくなっていた・・・
WordPressを自作する上でもはや欠かせないプラグインの一つが、「Advanced Custom Fields」。 名前を変更しようと思って、Wor・・・
配列の場合 /** * 配列の重複を削除する * * @param {array} ary* * @return {array} 処理後のary・・・
5年以上前と比べると、アップデートが簡単で驚く。とくに記事にするまでもないと思いつつ、一応備忘録。 インストールすると、既存のディレクトリはそのままに別・・・
プラグインを更新中に、誤って、違うページにアクセスしまいました。すると、管理画面だけでなく、公開中のすべての画面が「briefly unavailable f・・・
Gulp。いつもは正常に動いている環境をそのままコピーして再利用するようにしている。そうすることで、案件ごとに毎回環境作りをする手間を省くことができ、何よりG・・・
めっちゃ参考になるページを見つけた。 絞り込みをするたびに色々ググっていたが、これがあればほとんどのことが解決できそうな気がする。 参考: これは便利!Word・・・
まずはサンプル。 これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。 これは、overflowをautoにした要素のスクロ・・・
iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。 サンプル:iframeの高さを自動調整するデモ・・・
http://localhost:8888/ での参照ではなく、http://localhost/ で参照できるようにします。 MAMPの設定を変更する M・・・
【2020年07月13日】 macOS Catalina(10.15.5) / Adobe iLLustrator 2020(24.2.1) にて動作確認済・・・
いつもは直接アップロードしているので気にしていなかったが、WordPress管理画面のメニュー「メディア」からfavicon.icoをアップロードしようとした・・・
<?php $args = array( 'paged' => 1, 'posts_per_page' => 20, 'post・・・
WordPressの管理画面。「投稿」や「固定ページ」の一覧は、公開日順に並んでいる。ところが、カスタム投稿を追加した場合、公開順ではなく名前順に並んでいること・・・
ポイントを使ったり、増やしたりしたときに、結果のポイント数に差し替えるのではなくて、カウントアップしたり、カウントダウンして動的に動かそうと思って作ってみた。・・・
前回、「入力フォームを自由にカスタマイズできる「Advanced Custom Fields」」で基本的なフィールド名を出力方法を紹介したが、今度は条件分岐に関・・・