会社のホームページを作ることになりBizVektorで作成したのでメモです（今はBootstrapで作ったものを使用していますが、更新が面倒で情報量が少ないので・・・）
WordPressを使いますので、基本的にHTML/CSSの知識は不要ですし、よほど凝ったものでなければ1日で大体の形は作れます。（作ったホームページを見せたいけど身バレするので・・・）
WordPressは「仮想サーバー」か「レンタルサーバー」にインストールする必要があります。ここを見ているということは「レンタルサーバー未契約」の方だろうし、まずは「仮想サーバー」で進行します。ここで綺麗なホームページを作れたら、ドメインを取得してレンタルサーバーにアップして終わりです（難しく考えないで進行して下さい）
レンタルサーバーにワードプレスをインストール済の方は不要ですが、ローカル環境で作成する場合は下記を参考にして下さい
⇒ ローカル環境でWordPressを使ってサイトを作ってみよう！！
3日で会社のホームページを作る方法
WordPressをインストールしてあることを前提に進めます。
まずは下記の管理画面を開いておいてください。
ここでは「100%GPLライセンス。無償＆商用利用可」のBizVektorで進行しますので「テーマ」と「子テーマ」の2つをダウンロードします。
BizVektor（公式）⇒ https://bizvektor.com/
■テーマのダウンロード⇒ https://bizvektor.com/about/download/
■子テーマのダウンロード⇒ https://bizvektor.com/setting/customize/
ダウンロードしたテーマを適用するために、外観＞テーマ＞新規追加を選択。
次に、テーマのアップロード＞ファイルを選択＞テーマを選択＞開く＞今すぐインストールをクリックします。
同手順で子テーマもインストール＞子テーマをインストール後、有効化を選択します。
この時点でホームページを一度確認してみて下さい。（左上の管理画面＞公開ページを見る）
ここで文字（フォントファミリー）が気に入らないので少しだけ変更しておきます（後でも全然OK）上部にあるカスタマイズ＞追加CSSをクリックして下記のコードを追加します。外観テーマの編集でもOKです。
|
1 2 3 4 |
body { color: #666; font-family: 'Hiragino Kaku Gothic ProN',Meiryo,sans-serif; } |
次に外観＞テーマオプションを入力で必要事項を入力します（分かる範囲で会社概要など全て入力します）
■会社のロゴがある場合は、ここでFaviconを作成します⇒ http://app.tree-web.net/icon_converter/（32Pixelをダウンロード)
■「3Rエリアを表示しない」にチェックをつけます※いかにもBizVektorなので・・・外したほうがカッコいいと思います。
■Topページも1カラム（サイドバーなし）の方が見やすいと思いますので「サイドバーを非表示にする」にチェックをつけます。
テーマオプションはとりあえず終了です。
TOP画面に表示されている「ブログ」の表示を削除する場合は下記を記載します（CSSに追記する）
|
1 2 3 4 |
.content #topBlog { margin-bottom: 30px; display:none; } |
ついでにフッター部分に表示されている「Powered by WordPress & BizVektor Theme by Vektor,Inc. technology.」の表記も邪魔なので見えないようにします。
|
1 2 3 |
#powerd { display:none } |
次にダッシュボードに戻り下記のことをやってしまいます。
■設定＞パーマリンクの設定をクリックして、カスタム構造にチェックをいれて空白部分に%postname%と入力します※これでhttp://ドメイン/〇〇の部分を自分で入力できるようになります。
■プラグイン＞新規追加＞TinyMCE Advancedを検索して追加します（文字入力補助です）
■固定ページ＞新規追加で「TOPページ」「会社概要」や「ブログ」「お問い合わせ」など帯状のメニューとして表示させるページを作成して公開します。1カラムにしたい場合は固定ページの属性＞テンプレート部分をデフォルトテンプレートからNo sideberに変更します。ここで複数ページを作成するのですが、商品一覧（親）＞商品紹介（子）などの属性を追加したい場合も設定します。公開する際には、メタキーワード＝検索されるキーワードも設定します。
次に上で作った固定ページの1つをトップページをして設定します。
固定ページをいくつか作ったら外観＞メニューをクリックして下記のように追加します。
メニューに小さい文字を表示させたい場合は、表示オプション＞説明にチェックをつけると説明欄が表示されるようになるので書き込みます。
現状はこんな感じですね（ロゴは適当に作りました）
デザインの編集は勿論CSSでゴリゴリやっても可能なのですが、一つずつ直さないといけないので時間がかかります。出来ればこのタイミングでBizVektorの拡張プラグイン＝デザインスキンを購入して下さい。
仮にここで「Attract」を適応させると下記のようになります。
ココからでもCSSを編集した方が楽ですし、CSSをかけない人でもプラグインがあれば色の指定ぐらいなら可能です。
次に、「お問合わせ」の設定をします。
プラグイン＞新規追加＞Contact Form 7を検索してインストール＆有効化します。次にお問い合わせ＞新規追加＞「お問い合わせ」を作製して保存します。
コードが作成されるのでコピーします。
コピーしたものを固定ページで作った「お問い合わせ」にテキストととして貼り付けます。
テーマオプションに戻り「お問い合わせ」のURLを入力して保存します。
ここで気分転換に個人的には不要と感じるフッターのこの部分を見えなくします。
|
1 2 3 4 5 |
#footer .innerBox { padding-top: 25px; padding-bottom: 20px; display: none; } |
次にブログの設定をします。
固定ページ＞新規追加でブログを作成します。
先程と同様にメニューに追加します。
次に設定＞表示設定＞投稿ページを「ブログ」にして保存します。これで今後は投稿＞新規投稿から普通にブログを書くことが出来ます。
大体は、こんな感じで綺麗になると思います。
おまけ
固定ページや投稿ページでデフォルトテンプレートを使用した場合、サイドバーが表示されますのでウィジェットの設定でドラッグ＆ドロップで追加して下さい。
ブログ投稿記事にSNSボタンを設置したい場合はプラグインの新規追加から「WP Social Bookmarking Light」をインストールして設定後、外観＞テーマの編集＞編集するテーマを「BizVektor（親）」に変更して個別投稿 (single.php)に下記を入力します（場所は画像を参考にして下さい）
|
1 |
<?php if(function_exists("wp_social_bookmarking_light_output_e")){wp_social_bookmarking_light_output_e();}?> |
ホームページは中身を考えるのが一番大変なんですけどね（苦笑
以上です。