WordPressで簡単に自分でHPを作成する

HP作成の全体の流れは、
①サーバーにデータベースを作り、そこへWordpressのプログラムを入れる
②サイトのデザインを決める(テーマを選ぶ)
③プラグインを入れる
④好きなことを書き込んでいく(動画なども入れ込んでいく)
⑤できたらFACEBOOKと連携させる (今回これはやりません)
です。 

 

1.サーバーを借りてサーバーにデータベースをつくり、そこへwordpressを入れる

①サーバーを借りる
まず、一応、Wordpressを配布しているサイトを確認しておきます。
http://ja.wordpress.org/
次に、サーバーを確保します。
サーバーは、PHP5が使え、wordpressが簡単にインストールできるもの(クイックインストール)を選びます。

さくらのインターネットのレンタルサーバーのスタンダード以上なら、この条件を満たしています。
スタンダードなら月額500円で10GまでUPできます。
個人で1つのサイトをもつなら、これで十分だと思います。

②借りたサーバーにデータベースを作ります
サーバーコントロールパネルにたどり着き、アプリケーションの設定の中のデータベース作成項目をクリックし、DBをつくります。(なんと、20個まで作れます。。。つまり、WordpressのHPを20個も作れるということです。10Gまでですが、、、)

③Wordpressをインストールする
に、一応、PHPの現状のバージョンがPHP5以上であることを確認し、Wordpressのサーバーへのクイックインストールへ進みます。運用に便利なツールの設定の中のクイックインストールをクリックすると、カテゴリメニューが出てきて、その中にブログ(2)というのがありますので、クリックします。すると、下段にWordpressがありますので、クリックします。あとは、インストール先やさっき作ったデータベースを入れ、インストールを開始します。

詳しくは、いろいろな方のサイトに出ています。下記のサイトも参考になります。だいたい、2分程度でほとんど自動でできるはずです。
http://miyearnzz.sakura.ne.jp/archives/1597

注)wordpressのバージョンは最新から少し前のが良いです。3.3.0が最新なら、3.1.0ぐらいが良いと思います。プラグインはwordpressの進歩に少し遅れていますので。

 

 

2.テーマを入れる(HPのデザインを決める)

WordPressがインストールができましたら、今度はサイトのデザインをおこないます。
サイトのデザイン(機能を含む)は、テーマとは呼ばれている出来合いのデザインから選びます。

①まずは、twenty-tenという基本的なテーマで作ってみる
ダッシュボードのテーマを開き、条件を入れて選びます。
最初は、twenty-tenという、もっとも基本的なものを選んでください。
twenty-tenは、wordpress開発チームが作っているもっとも基本的なものです。
それで、一応、表紙と5,6ページ、HPを作ってみてください。
ついでに、カテゴリーやタグも設定して見ると良いと思います。

②気に入ったテーマに変える
できましたら、他のテーマではどのように見えるか、見てみます。
また、ダッシュボードのテーマを開き、条件を入れて選びます。

下記の動画を見てください。
(このQualia-Partnersのサイトはtwnty-tenのデザインを少し改良して作ってあります。)

 

このHPのデザインをデザインを変えてみます。
条件を入れテーマの候補を出します。
次に、気に入ったものをダウンロードしてきます。
そして、プレビューでどんな感じになるか見てみます。
良ければ、それを使います。

③テーマに多少気に入らないところがあっても我慢する
テーマのデザインは、デザイン自分でも手を加えることはできるのですが、やめた方が良いです。
正直、phpがよくわかりません。
間違えると元に戻らなくなってしまったり、これから入れるプラグインというプログラムがおかしくなったりすることがあります。
間違いなく、他のテーマに変えた時、デザインが崩れてしまいます。
あと、表もテーマによってはデザインが崩れます。

どうしても、独自に手を加えたいという方は、こちらを見てください。
文字のフォントや大きさ、色、背景の色、幅などを変える方法をお教えいたします。
それ以上は、分かりません。

 

 

3.プラグインを入れる

テーマが決まりましたら、プラグインを入れていきます。
プラグインとは、スマホでいうアプリみたいなものです。
インストールするだけで新しい機能を付け加えることができるすぐれものです。
これがあるから、wordpressは良いんです。
facebookとも簡単に連携できます。

しかし、気をつけなくてはいけない点が2点あります。
①新しいバージョンのwordpressでは動かない場合がある。
更新が間に合っていなかったり、作成者が更新を止めてしまったり、、、。大体が、大丈夫ですけど。
②プラグインを多く入れていくと、仲の悪いものが出てくる。
AというプラグインとBというプラグインがぶつかり合って、機能しなくなってしまう時がある。
この時は、どちらかを外して、同様な機能で他のプラグインに入れ替えます。
③はじめからいくつか必要なものは入っているので、それらには手をつけない。
「これいらないんじゃないの?」というのもありますが、そのままで。。。

プラグインを探すときは、”wordpress プラグイン ○○したい”と入れて検索をかければ、
大抵そのプラグインを使ったことのある方の感想などが出てきます。
たまに、英語でしか感想がない場合がありますが、、、。

出てきたもので、よさそうなプラグインをWordPress plugin directoryから持ってきます。
ダッシュボードのメニューのプラグインの新規追加にいき、そこで検索窓に欲しいプラグインの名前を入れます。検索をかけるといくつか似たようなものが出てきます。その中から目当てのものをインストールします。有効化すると使えるようになります。

検索しても出てこない場合、サーバーに自分でファイルをUPしなければなりません。
やめましょう。
出てこない場合には、似た機能の他のプラグインにして、検索して出てくるものを使いましょう。
検索をかけてでてきた他のものでも良いですし、もう一度、WEBで検索して探しなおすのも良いと思います。

 

■私が入れているプラグインはこんな感じです。

関連記事を自動で出してくれるプラグインとFACEBOOK連携のプラグインを入れようかと検討中です。


All in One SEO Pack
(Out-of-the-box SEO for your WordPress blog. Options configuration panel | Upgrade to Pro Version | Donate | Support | AmazonWishlist)
SEO対策用のプラグインです。一応入れてありますが、キーワードの選び方などをもう少し考えなくてはいけません。SEOのキーワード設定ができていないと、、、。

Dagon Design Sitemap Generator
(Generates a fully customizable sitemap)
人が見るためのサイトマップを自動で作成してくれます。

Google XML Sitemaps with Multisite support
(Improved Google XML Sitemaps plugin with Multisite Support)
こちらが、googleのためのサイトマップを作ってくれます。SEO対策の一環です。

Embed Iframe
(Allows the insertion of code to display an external webpage within an iframe. The tag to insert the code is:


ifrmeが使えるようにしてくれます。このおかげで、外のサイトのページをこのHPのページ内に簡単に見せることができています。好かれるあきんどさんの40の行動チェックがこの方法で、外のサイトのジャバスクリプトを引っ張ってきてくれています。

Google Analytics for WordPress
(This plugin makes it simple to add Google Analytics to your WordPress blog, adding lots of features, eg. custom variables andautomatic clickout and download tracking.)
Google Analyticsをつかえるようにしてくれるプラグインです。これで、Google Analyticsでサイトの訪問者や検索されているキーワードや見られているページなど何でも分かるようになります。(Google Analyticsへの登録も必要です)

gtrans
(Google Translate Element)
自動翻訳をしてくれます。ページのガジェット(サイドメニュー)に翻訳のボタンを付けてくれます。日本語を英語のサイトにするのに、翻訳ボタンを日本語で書いておくと外人には分かりませんね、、、。

inquiry form creator
(inquiry-form-creator is a inquiry submit form with mail and data base support.)
これは、問い合わせなどのフォームを自動で作ってくれるものです。contact form7というのが有名なのですが、こちらは確認ページ上がり、自動返信もあるので便利です。また、何種類でも作って自由なところに貼り付けられます。

Thumbnail For Excerpts
(Thumbnail For Excerpts allow easily, without any further work, to add thumbnails wherever you show excerpts (archive page,feed…).)
これは、投稿記事の写真付きの抜粋を出してくれるものです。-moreーでもできますので、使わなくての良いかもしれません。

TinyMCE Advanced
(Enables advanced features and plugins in TinyMCE, the visual editor in WordPress.)
これは、投稿記事を書くときに、さまざまなツールを付加してくれるものです。使いにくいエディターが高度なエディターになります。表も入れられるようになります。が、癖があります。なんか、うまく機能しないな~というボタンもありますので、使えるものでうまく記事を作ってください。直そうとすと時間ばかり取られます、、、。

Ultimate Google Analytics
(Enable Google Analytics on your blog. Has options to also track external links, mailto links and links to downloads on your ownsite. Checkhttp://www.oratransplant.nl/uga/#versions for version updates)
ブログ上で、Google Analyticsをつかえるようにするものです。私は、Google Analyticsのサイトに行って調べていますので、使っていません。せっかちな方に良いかもしれません。

Viper’s Video Quicktags
(Easily embed videos from various video websites such as YouTube, DailyMotion, and Vimeo into your posts.)
これは、いろいろな動画を記事の中に置けるようにするのですが、特にFLSHを置きたかったので、設置しました。


4.好きなことを書き込んでいく

中身はともかくとして、ヘッダーが重要です。
プロの方なら、フォトショップを使うのでしょうが、もっていません。
買うには高いし、なにしろ使い方が難しいです。

そこで、無料のオンラインエディターPixlを使います。 → 詳しくはこち

 

このエントリーをはてなブックマークに追加
はてなブックマーク - WordPressで簡単に自分でHPを作成する
このエントリーを Google ブックマーク に追加
[`google_buzz` not found]
[`yahoo` not found]
[`yahoo_users` not found]
[`yahoo_buzz` not found]
[`livedoor` not found]
[`livedoor_users` not found]
LinkedIn にシェア

工藤 英一

工藤 英一 について

Qualia-Partnersの代表の工藤です。ゼネコンの研究員から会社経営を経てコンサルタントになりました。自身の経験から、リピーターとの関係を深めお得意様を増やしていくことを強く勧めています。
カテゴリー: 問題解決 パーマリンク

WordPressで簡単に自分でHPを作成する への2件のフィードバック

  1. I’m curious to find out what blog system you
    are using? I’m having some small security problems with my
    latest site and I would like to find something more secure.
    Do you have any solutions?

    new online casinos for us players with no deposit bonuses

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です