LogoMark.png

WordPress

WordPress


はじめに

WordPress は近年最も注目度の高いオープンソースのCMSで、事実上の標準とも言える存在です。以下、2つの公式サイトがあります。

HTMLやCSSに関する専門的な知識がなくても、とりあえず始められる。と同時に、技術を段階的に身につけていけば、完全に自分の手でカスタマイズできる。あらゆるオープンソースに言えることですが、
・安くてほとんどだれでも手に入れられる
・小さな規模で応用できる
・人間の創造力を発揮させる
WordPressはその意味でも、非常に完成度の高いツールと言えます。

CONTENTS




WordPress.com の体験

とりあえず体験してみる

WordPress はブログ系のCMSなのですが、そもそもブログの編集自体経験がない方には、どんなものか見当がつなかい・・・そんな存在だと思います。
 そこで、まずは、アカウントをとるだけで WordPress が体験(もちろん同時に情報発信)できる wordpress.com の活用をおすすめします。まずは、ここで実際に投稿してみる・・・、またダッシュボード(管理画面)でできることを確認してみて下さい。

WordPress アカウントの取得

必要なのはメールアドレスだけです。開設には5分もかかりません。

WordPress をローカル環境で体験

ローカルサーバーで動かす方法(練習用・試験用)

WordPress はPHPで動くWebアプリケーションです。また記事はMySQLというデータベース管理ソフトによってサーバーに蓄積されるので、「ファイルをブラウザにドラッグして表示」といった、通常のHTMLファイルと同様の動作確認はできません。PHP と MySQL が動く環境を、すなわちローカルサーバー環境を、あなたのPC内に実現する必要があります。

大変面倒ではありますが、CMSの本格運用には、クライアントとサーバーの関係を理解し、さらに「PHPとは何なのか?」ということまで(ざっくりでいいので)知っておくことが必要です。


XAMPP をインストール

ローカルサーバー環境を実現するためのソフトウエアパッケージに XAMPP があります。オープンソースなので誰でも自由にダウンロードしてインストールすることができます。詳細を以下のページで解説していますので、まずはこれを準備して下さい。


XAMPP のサービスを起動

アプリケーション > XAMPPマネージャーを起動して、以下のサービスを Runnning の状態にして下さい。

XAMPP の動作確認

htdocs の確認

Webサーバーが配信するファイル(index.html 等)を設置する場所のことをドキュメント・ルートと言います。XAMPP のドキュメントルートは、アプリケーション > XAMPP > htdocs で、そこに置いたファイルは、以下のようにアクセスすることで閲覧できます。

WordPress はひとつのフォルダにまとめられたファイルセットとして提供されるので、ローカル環境で、WordPress を試す場合は、htdocs 以下にフォルダごと投入します。そして、閲覧アドレスは、以下のようになるのが普通です。

http://localhost/wordpress/


phpMyAdmin でデータベースの準備

WordPress は、記事情報を MySQL データベースに保存します。したがって、WordPress をインストールする前に、データベースを1つ、事前に準備する必要があります。この作業は、 phpMyAdmin というデータベース接続クライアントツールを用いて行います。以下、その手順です。

WordPress 本体を htdocs へ

WordPressはその大半がPHPで記述されたプログラムファイルで、サーバー上に置いて動かす Webアプリケーションと言えます。入手したパッケージは、そのままサーバーのドキュメントルートに置くのが一般的です。

パーミッションの変更

PHPはプログラムなので、サーバー内でそれが動けるようにファイルやフォルダのパーミッションを変更することが必要です。乱暴ですが、ローカル環境の場合は、すべてに 777(ユーザーの制限なく、読み・書き・実行可能)を設定するとよいでしょう。

「パーミッションって何?」という方は > FilePermission

Macの場合は、以下の手順で変更できます。

WordPress の初期設定

以上で下準備が整いました。次に WordPressを使うための初期化を行います。

wp-install.jpg

動作確認

WordPress をレンタルサーバーで実践運用

レンタルサーバーに WordPress サイトを構築する手順を説明します。

WordPress はPHPで動くWebアプリケーションです。また記事はMySQLというデータベース管理ソフトによってサーバーに蓄積されるので、レンタルサーバーを探す際は、以下の条件を満たすものを検討する必要があります。

ということで、以下をご参考下さい。

開設事例

管理情報MEMOの準備

メールアカウントの確認

レンタルサーバーの選択

大学の学習用サーバーはPHPは動きますが、MySQLの利用ができません。よってレンタルサーバーを用意する必要があります。以下をご覧下さい。

ご注意

サーバー設定

さて、ここからが本格的な作業になりますが、最近のレンタルサーバーではWordPress の自動インストールサービスをもつものが多くなりました。管理画面から「WordPressのインストール」ができる場合は、それを指定するだけで準備されるので、この先の手順は不要となります。

以下は、手動でセットアップする場合の一般的な手順です。

データベースの準備

WordPress は、記事情報を MySQL データベースに保存します。したがって、WordPress をインストールする前に、お使いのサーバー上で、データベースを1つ、事前に準備する必要があります。

MySQLが使えるサーバーの場合、レンタルサーバーの管理画面で「データベース」の準備・管理が可能です。以下の情報が、WordPress インストール時に必要になるので、しっかりメモしておきましょう。

phpMyAdminによる確認(任意)

ここは読み飛ばしても構いません。
WordPress の利用では、とりあえず1つのデータベースが存在すればよいので、上記のプロセス(管理画面からデータベースの作成)で準備OKですが、大半のレンタルサーバーが、phpMyAdmin を用意していて、直接的な管理もできるようになっています。
 どんなものか・・ということは知っておいた方がいいので、以下、簡単に確認手順を記載します。

WordPress のインストール

WordPress の初期設定

wp-install.jpg

動作確認

DataBaseについて


WordPress の文書構造

WordPress が書き出すHTMLは、およそ以下のような構造になっています。
世界が認めた事実上の標準。ページの構造の典型として参考になります。

<body>

    <div id="page">
    
        <header>
            <hgroup>
                <h1 class="site-title">OpenSquareJP</h1>
                <h2 class="site-description">Just another WordPress site</h2>
            </hgroup>
            <nav id="site-navigation">
                <h3>Menu</h3>
                <div class="nav-menu">
                    <ul>
                        <li class="current_page_item">****</li>
                        <li class="page_item page-item-1">****</li>
                        <li class="page_item page-item-2">****</li>
                    </ul>
                </div>
            </nav>
        </header>

        <div id="main">
    
            <div id="primary">
                <div id="content">
                    <article id="****">
                        <header class="entry-header">
                            <h1 class="entry-title">information</h1>
                        </header>
                        <div class="entry-content">
                            <p>****</p>
                            <p>****</p>
                        </div><
                        <footer>
                             ****
                        </footer>
                    </article>
                    <div id="comments">
                        ****
                    </div>    
                </div>
            </div>
            <div id="secondary">
                <aside id="*****">
                    ****
                </aside>        
                <aside id="*****">
                    ****
                </aside>
            </div>
        </div>
    
        <footer>
            <div class="site-info">
                ****
            </div>
        </footer>
        
    </div> 

    <script type='text/javascript' src='http://**** '></script>
    
</body>








PAGES

GUIDE

DATA

添付ファイル: filewp-install.jpg 135件 [詳細]
Last-modified: 2020-06-17 (水) 16:09:43