トップ > ブログ運営-Wordpress/CSSほか > 会社のホームページをWordpressにする

会社のホームページをWordpressにする

ブログ運営-Wordpress/CSSほか

ビルダーで作ってある2000年代風な会社のウェブサイト。 サイトっていうか、まさにホームページ。 しかもビルダーで作ってあってページの入れ替えなんて手打ちで派不可能。

これまでMonstraや https://kimigauchu.com/monstra/

CMSimpleなどを試してきたわけだが https://kimigauchu.com/cmsimple/

まあ普通にWordpressの使いやすさにはかなわず。

会社の人たちも無事に説得できたので、ようやくWordpressで作りかえる作業。 Blocsでチャチャチャと作って、会社にドヤァしようかと思ったけど 誰も更新できない上に自分のMacでしか更新できなくなるからなァ しかも絶対、会社はお金くれないだろうし・・・・

さきにできあがりのほうこく

[lightgrey_box] かかった費用 新規サーバー代（会社負担） わたしの労力（プライスレス）

かかった期間 仕事しながら～休みの日とかチョコチョコ して2か月くらい 今あるページをWordpressで書き変える作業が難。 CSSは変なコダワリ出さずにそのままです [/lightgrey_box]

SEO的に

微妙。今まで静的ページだったのでSEOはがくっと落ちるかも。 ただ、レスポンシブになったのでそこは◎

大前提は自分のサイトと違うこと

その名の通り。納品先は会社。Wordpressとか何？みたいな人たちのために作る。外部jQueryスクリプトなど無用。テーマの大幅改造なども不要。変な欲を出さずにスタンダードに徹する

サーバープランの変更

Wordpressを使うためにはライト（月額121円）からスタンダード（500円くらい）にしなくてはいけません。

さくらの場合、サーバーの収容が違うため、一旦解約して新規で申し込みののちドメインを設定し直しだそうです。

個人の場合はお金が帰ってくるそうなのですが、法人は返金なしだそうです。 数百円ですが・・・焦って解約しなくてもいいというのもあります。 新規なので新規の手数料が必要です。安いけどね。

私はココのサーバー（ロリポ）コロリポ→ロリポにしましたが、差額を払うだけでよかったのになんだこのめんどくささは・・・・

公式の移行手順を見ながらやってみました。

プラン移行（変更）の手順｜さくらインターネット公式サポートサイト

申込後すぐ仮登録のメールが来たのですが、使えるようになるまで1時間10分くらいでした。 （さくらはお金払わなくても2週間お試しということで申込後すぐ使用可能） コンパネは動いてましたので、マニュアルどおりにデータベース作ってクイックインストール。ディレクトリ直下には作れませんでした。

以下の色々操作してて思ったけどさくらの方が表示が早いな。テーマが軽くて、プラグインやわけわからんスクリプトを仕込んでないっていうのもあるけど・・・・まあ値段も違うしね。ネットオウルのほうはどうなのかしらね。

メールアドレスの追加

たぶんサーバーメールはすっ飛ぶのでローカルにできるだけ受信させておく

ドメイン貼替前につくっておいた。 幸いにも数が少ないからよかった。

ドメイン設定

旧プランの方で削除→新プランで設定 この削除してから2時間は使えないとのことで年末年始しかないと思いましたがページ作るのが間に合わなかったのでだいぶ遅くなりました。旧プランは解約まで使えるのでつい・・・

実際の旧削除、新設定は淡々と行えました ドメインもさくらで取ってたので、自動的に出てきたので入力不要でした。

Wordpressアドレスの設定

さくらではディレクトリ直下にインストールできなかったので、ダッシュボードの設定からWordpressアドレスと表示アドレスを変えてみましたが、どうやってもうまくいきません。 Wordpressアドレスをさくらのアドレス、 表示アドレスをドメインもやってみましたが、Wordpressフォルダが404エラー表示。

ぐぐったら↓の方法でいけました。 「ユーザー名.sakura.ne.jp/フォルダ名」のWordPressを独自ドメインで表示する | 西沢直木のIT講座

コンパネのドメイン設定変更で「wwwを付与せずマルチドメインとして使用する（上級者向け）」（これは一番上のふつうのマルチドメインを選択してもいいっぽい。というかぐぐって出るアドレスがwwwだったのでマルチドメインにした） マルチドメインの対象のフォルダをご指定ください→Wordpressインストールしたフォルダ 最後のリプレイスは特にしてません（だめ？）

実際ドメインが使えるようになるまで2時間もかかりませんでした。 メールアドレスはサイトのほうより少し遅く1時間半くらいかかりました。私だけ会社でウェブメール使ってたのでフォルダ分けとか今から・・・？と思うとつらいなあ。バックアップにと思ってメーラーも設定してるけど・・・。

テーマの選択

きめたのはHabakiriというテーマ Habakiri | BootstrapベースのWordPress公式ディレクトリ掲載テーマ

おまかせで簡単に企業ぽいサイトができるわけではないので ある程度のページは自分で作らないといけない Bizbleakでも満足してもらえそうだけど自分的にはありふれた企業サイトっぽくてちょっとなー SimplicityやStingerもあつかいやすいけど、ちょっとブログサイトすぎる

公式テーマも探した

WordPress › sonalsinha21 « Free WordPress Themes かなりかわいいテンプレートがある Liteなのでカスタムどのくらい？

WordPress › Ultimate « Free WordPress Themes ビジネス風でシンプルでいい感じ。これもLite

WordPress › Zerif Lite « 無料 WordPress テーマ WordPress › シドニー « 無料 WordPress テーマ このへんも～

WordPress › Customizr « 無料 WordPress テーマ 改造できすぎてかえって大変そう

WordPress › Arcade Basic « 無料 WordPress テーマ

デメリットは英語なこと？自分だけならなんとかなるけど。 あとLiteだとなにが制限？

初期設定

Wordpressはドメイン貼替てから。

パーマリンクは一応カテゴリ/投稿名

さくらのサーバの設定

初期状態だとスマホの写真ですらアップできない容量（5MBまで）になっているで、php.iniを書き変えます。 ロリポほど簡単ではないですが、アップロード上限を追記します。

30秒で出来る！さくらのレンタルサーバーのアップロード上限の制限を上げる・変更する方法 | 9ineBB 【コピペ用】PHPのアップロード容量を変更する.htaccess、php.iniの記述サンプル – マイペースクリエイターの覚え書き

子テーマ

まず子テーマを作成。FTPの設定はめんどいのでサーバーコンパネからファイルマネージャーを使う。操作方法はロリポップとは勝手が違うけどさくらのほうがだいぶ使いやすいです。

  1. themesフォルダにchildフォルダを作る
  2. style.cssを作る
  3. functions.phpを作る
    • これもマニュアル参考に。cssファイルに@importでもできるけど、functionsは絶対いるので。
    • 文字コードはUTF-8のCR+LFでよいかと
  4. とりあえずダッシュボードに戻り子テーマを適用させて動作確認

テーマの設定はまだまだ先！！ またファイルマネージャーに戻りコードを追加していきます。

style.css

自分のサイトと違ってデザインいじる必要がないですから、マニュアルにあるおすすめCSSをそのままコピーします

Habakiri を日本語サイトで使うときのオススメ CSS | Habakiri

会社PC(Win)でみたらタイトルやメニューが明朝体で表示されてガックリ。こまかく修正。

ヘッダーに画像を入れたものの、スクロールした時に固定され しかもタイトルがめっちゃ下部についており おそらくstyle.min.cssを子テーマのfunctionsで呼び出してるからなんかヘンなんだろうなと思い子テーマに画像を固定しないように追加し、cssのページヘッダー部をコピーしたら位置も直った。functionsをminでなく普通の方を呼び出した方がよい？

.page-header{background-attachment: scroll;background-position:center center;background-size:cover;margin:0;padding:64px 0}

function.php

日本語パーマリンク禁止はどうしても許せんのでとりあえずコレだけ

function auto_post_slug( $slug, $post_ID, $post_status, $post_type ) {
    if ( preg_match( '/(%[0-9a-f]{2})+/', $slug ) ) {
        $slug = utf8_uri_encode( $post_type ) . '-' . $post_ID;
    }
    return $slug;
}
add_filter( 'wp_unique_post_slug', 'auto_post_slug', 10, 4  );

入れるプラグイン

基本的には自分が使ってるものを取捨選択して、より一般的なプラグイン 幸いにも表示が早いので軽量系プラグインはいらないと判断。

TinyMCE Advanced

ほかの従業員用 まだテーマをつついてないのでわからんけど、場合によってはBlack Studio TinyMCE Widgetもいるかもなーとか

JP Markdown

これは完全に自分用。頑なにJetpackは拒むよ！

Yoast SEO

SEOは無視できないので

Lightbox Plus Colorbox

HTML版も使用中なので Bootstrapのせいが動いたり動かなかったり（原因追究はしてないけどフルサイズしかない画像が作動しなかった） ので、EasyFancyBoxにした。設定でタイトル非表示に。 次へボタンが出てこなかったのでGallelyのAutogalleryをWordpress～からAll～に変更したら出てきた。

Auto Post Thumbnail

自分には不要になってきたプラグインだけど仕組みを説明できるわけないから当然必要なプラグイン

MW WP Form

自分はContact Form派だけどいれてみた。ちょっと難しいけどいろんなことができるのは企業サイトに向いてるね WordPress › フォーラム » MW WP Form テキスト入力欄の幅をレスポンシブに MW WP Form｜確認画面付きメールフォームプラグインの設定テンプレート！ Contact Form7にしました。下記参照

Resize Image After Upload

これも、自分はImsanity使ってるけども。 このプラグインがだめなのが、メディアから直のアップロードも区別なしに一括縮小なこと。（Imsanityは区別できる） なので仕方なくヨコ1366に設定 ついでにメディアの設定はサムネ150×150 中は0×0 大が688×0

SiteGuard WP Plugin

日本人なら相当有効な気がする。

Optimize Database after Deleting Revisions

リビジョンだけならWP Total Hacksでもできるけど・・・ リビジョン3で削除とかのは全部チェック。スケジュールはWEEKLYの深夜。

WP Slimstat

同じじゃつまらないからStatPressReloated入れようと思ったら消えてたので結局これ。（自分のはPtengineにしてみた） 表示がヘンなのでInstall GeoLite　DB /wp/wp-content/plugins/wp-slimstat/admin/のなかのphpファイルのUS.moみたいなとこをja_JPにor laungageフォルダの wp-slimstat-ja_JP.mo→wp-slimstat-ja.mo に Date Formatをy-m-dに 登録ユーザーの解析→No 会社のIPを除外リストに入れる IPアドレスの変換→はい ちなみに、AdplusBlockのアドインをいれているとうまくログが表示されない

Child Pages Shortcode

ショートコードで親子ページの一覧を表示させるプラグイン。 固定ページ階層化したときに親から子へのリンクをいちいち作るのめんどいなーと思ったらとってもありがたいプラグインがあった。感謝～。

Per page add to head

いろんなCSSでデザインされたBOXを使いたいが、全体のcssファイルに記載すると膨大になる・・・ということで必要なページごとにヘッダー追記できるプラグイン。思わず感心した。もっと早く知りたかった。ここにもインストールした。 具体的には、事例ページにはバラバラのデザインで使いたい 子テーマcssファイルがめちゃ長くなるのは嫌だ ブログページには必要ない　など。

AddQuickTag

いらないかなーと思ったけど、文字の装飾を自分のブログより派手目にしないといけないのである程度登録しておく。このテーマの場合Bootstrapだから色々あるんだけど実際あまり使ってない。

WP Canvas

Bootstrapのグリッド理解してないから奇麗にレイアウトできない＆ソースわやになる（私はテキストモード利用） 割に横並びレイアウトがクッソ出てくる。 どううまくいかないかといいますと、ズレる　余白のバランスが悪い　などなどなど。んで調べても理解できないし時間かかる。

そしてレイアウト以外にもハイライトやボックス等Bootstrap標準だとさえないなーっていちいち検索したりタグ打ちしてたところ・・・いちいちちまちまやってるのがばからしくなるレベルだな ので、これ使った方が楽かな・・・こぎれいなやついっぱい含まれてるし。 公式のサンプルみたら、カラムきちんとレスポンシブだし。ていうかこのプラグインあったらBootstrapいらないよな

Shortcodes - WP Canvas WordPressで作る企業サイト（５）プラグインWP Canvasで固定ページなどを作る

Insert Page

更新履歴を作るのに、トップページに直にHTMLを書いたら私以外が更新できない。新着一覧を出す方法はたくさん出てくるけど、固定ページから出したい。 ウィジェットはめんどくさそう。固定ページを呼び出すショートコードも調べるのが面倒。 カスタムタクソノミーも作るのが面倒だしそこまでしなくても、的な。 固定ページがワヤになってきたからカスタムタクソノミー作ればいいんだけどね・・・ このプラグインでさくっと完成。専用固定ページ作って、トップページから本文だけ挿入。 WordPressで、ある固定ページの内容を他のページでも使い回したいとき

EWWW Image Optimizer

さくらのサーバーがロリポプランよりさくさく動くのでいらないかと思ったけどGoogleからの評価が低くなるので導入 Bulk Optimizeで一括。

Compress JPEG & PNG images

EWWWが定番ですがよりサイズ縮小をねらって。 TynyPNGのプラグイン版。 でもまだ使ってない

PS Disable Auto Formatting

自動整形がウザいことに今更気付いたので。 基本的にMarkdown記法なのでテキストだが、どうしてもビジュアルモードでしか使えないプラグインとかでテキストに戻ると改変されててかなり困る。 ただし、このプラグインはWordpress4.3以降では動作しない テキストとビジュアルの切り替えができない。 PS Disable Auto Formattingが効かないエラーの修復方法！プラグイン改造でWordPressアップデート後も使える裏技！ | 自作PCテクニカルセンター ここを参考にコメントアウトして、TinyMTCの Stop removing the p and br tags when saving and show them in the Text editorにチェック これで確かに一応動いたが様子見・・・ というかすでにメディアの挿入がおかしくなってきた 勝手に整形されるのが困るのより改行したとこがPやBRにならない方が困ったのでやめた。もちろんTinyMCEのチェックもはずす。これ逆効果だった。

Custom Post Type UI

カスタム投稿ページ作るのに時間かけてもしゃあないからサクっと 具体的な使い方はまた今度・・・・

WP-PageNavi

テーマになかったら入れる。

What’s New Generator

トップページに記事一覧を出せと言われそうなので。 記事一覧を固定ページに簡単表示／WPプラグイン「What’s New Generator」 | 楽々WordPressプラグイン

メニューの作成

メニューの種類をソーシャルナビゲーションにします といっても会社でSNSは使ってないのでここはfeedのみ

とりあえずメインメニュー分の固定ページをざざっと作って入れ子にしたり

のあとにようやくテーマのカスタマイズ。色

トップページはフロントスライダーに設定した固定ページで ブログというメニューから「最新記事一覧」を表示させたいけどトップページを固定ページにしたからむり？？

と思ったらあっけない方法でできた。投稿ページのほうをブログにすればよいらしい。へぇー フロントページを固定ページに設定しつつ、最新の投稿ページも使いたい！ | WPnavi

ページづくり

投稿はブログのみで会社概要とかは固定ページで作る。

Bootstrapベースなので本家を参照、だけどややこしいな。 CSS · Bootstrap

WP CanvasがBootstrapのグリッドより簡単だった。そしてソースも奇麗。あまり使わないビジュアルエディタだが慣れる。

あと装飾系BOXもstyleに追加。

あまり知られていないBootstrapスタイルテクニック、小技16個まとめ - PhotoshopVIP BootStrapに標準装備されてるのについつい再実装しがちな機能とかまとめ。 - NOT SO BAD Bootstrapでレスポンシブなレイアウトを組むときの要点覚え書き | Stella Design [グリッドシステム編]Twitter Bootstrapを使ってCMS化 企業向けコンテンツ管理システム | writeWired CMS Platform (ライトワイヤード) 第2回　グリッドシステムとブレイクポイントを理解する：BootstrapでレスポンシブなWebサイト制作｜gihyo.jp … 技術評論社

使えるWebフォントアイコン

Genericons - a free, GPL, flexible icon font for blogs! Components · Bootstrap Font Awesome, the iconic font and CSS toolkit

どれも一般的なもの

メールフォームの作成

MW WP Formでメールフォームを作ったもののメールが送れない。 正確には「送信完了するが実際届いていない」 こんなん罠すぎて公開できぬ。

WP Mail SMTPというプラグインを使いGoogleメールにするも送付エラー。 このプラグインを停止してWP Mail FormでなくContactform7にしたらアッサリ送信成功した。 Contact formだとこれでいいですか？の確認画面が出ないのがイヤという人が多いらしい。ない方が早くていいけどな？Contact formでも必要な機能十分だった。無駄な時間だった。

やばいな　画像一切ないｗなんの意味があるんだ！ 続きは次回

広告

toller

コメントを書く