【WordPress】テーマ

WordPressをインストールして設定を行ったら、まず初めにすることは、「テーマ」選びかと思います。
「テーマ」とは、ブログのテンプレートの様に、Webサイトの見た目の決めるデザインのようなものですが、全体の構成や枠組み、それぞれ独自の機能まで含まれています。

最新版(WordPress 5.2)では、「Twenty Nineteen」「Twenty Seventeen」「Twenty Sixteen」の3つがインストールされていますが、「外観」→「テーマ」→「新しいテンプレートを追加」をクリックすると、何千個ものテーマが表示されます。

「Twenty ~」という、開発された年数が名付けられたテーマは、全てWordPressのデフォルトのテーマで、利用者も大変多く、アレンジの仕方、扱い方など、たくさんの人が、サイトなどで、分析、解説していますね。分からない所があっても、ネット検索すると、大概、どなたかのサイトで答えが見つかります。私のこのサイトも「Twenty Seventeen」を利用しています。

その他のすごーくいっぱいあるテーマは、無料のもの、有料のもの、一部有料のもの、ある機能に特化したもの、デザインも様々で、迷ってしまいます。こちらもネット検索すると、オススメや特徴をまとめたWebサイトが多数あるので、そのようなものを参考にするのもよいかもしれません。

テーマを決めたら、カスタマイズを始めるのですが、その前に、テーマ内のファイルの関係をまとめてみました。ざっくりとした私の理解の範囲ですが。

「functions.php」は、テーマの中の王様のような存在です。各phpファイルを関係づけ、全体をまとめます。

それぞれのファイルの変更は、直接上書きするのではなく「子テーマ」を作成し、そこに変更点、追加点を記載していきます。(「子テーマ」については、また別に書きたいと思います)

【CSS】ボタンジェネレイター

CSSってスタイルの指定以外にも、結構色々な事ができるんですよね。jQueryやFlashの代わりとか、絵がかけるとか。

こんなドラえもんとか!→ CSSだけで描いたドラえもん

すごいですねー。

ウェブサイトに使われるボタンは、画像を利用するより、CSSのみで実装する方が軽量化を図れるし、SEOの観点からも優れていると言われています。CSS3の「border-radius(角丸)」や「linear-gradient(グラデーション)」を組み合わせると、画像と間違えるような美しいボタンが出来るのですが、少々面倒ですね。そんな時、CSSボタンジェネレーターを使うと、簡単にボタンのCSSを生成してくれます。

「CSSボタンジェネレーター」で検索すると、色々出てくると思いますが、私が利用しているのはこちらです。

www.bestcssbuttongenerator.com

左の部分から、基本のデザインを選び、右の部分で、細かな設定を調整します。
Text: ボタンの文字列、任意のクラス名、フォントスタイル、サイズ
Size: ボタンの高さ、幅
Border: ボタンの角丸、輪郭線幅
Box Shadow: 影の種類

スタイルが決まったら、出来上がったボタンをクリック。そうすると、右の部分に、HTMLとCSSが表示されます。あとはそれをコピペするだけ。
1行目はHTMLに、それ以外はCSSに。HTMLにリンク先を入れれば、それで完了です。

About Me

↑ 出来上がったボタン

便利ですね!

【WordPress】初心者以前の基本知識

世界で最も利用されているCMSであるWordPress。実際に使ってみたいと思っても、CMSに不慣れだと、そもそも何がどうなっているのか、どこから始めればいいのか、よく分からず、なかなか手が出せないということもあるかと思います。WordPressの使い方に関する書籍も出版されていますし、たくさんの人がウェブサイトで解説もしてくれているのですが、もっと基本の基本の基本、これってどうなっているの?っていう所をまとめてみたいと思います。

WordPressを利用するには、PHP(プログラミング言語)の利用できるウェブサーバーに、

・WordPress本体をインストール
・データベース(mySQLなど)を作る

この二つが前提条件になります。つまり、ウェブサーバーを借りる際、PHP、及びデータベースの使用が可能なサーバーを借りなくてはいけません。

上の図に示した通り、WordPressファイルは、主にページの枠組みを作り、データベースには、主にコンテンツの内容や設定が書き込まれていきます。この二つが組み合わせってウェブサイトを生成しています。


サイトを生成する二つのうちの一つ「WordPressファイル」の中身を覗いてみると・・・

PHPファイルがずらっと並んでいますね。これは全て、ウェブサイトの枠組みを構成するための部品です。WordPressをインストール後、ブラウザ上で操作している限り、これらのPHPファイルに直接手を加えることはありませんが、細かなオリジナルな設定を行う場合、書き換えたり、新たなPHPファイルなどを加えたり、という作業が必要になってきます。

さて、サイトを生成しているもう一方の「データベース」の中身はというと・・・

関連付けたデータベースに、自動的に様々なテーブルが生成されていますね。
例えば、wp_postsには、投稿された記事のテキストが書き込まれ、wp_commentsには、コメント欄に書き込まれた内容が、テーブルに書きつけられています。
データベースも、ブラウザで操作している限り、直接手を加えることはありません。サーバーのお引越しなどをする際は、データベースの内容をエクスポートする必要がありますが。

WordPressを使うにあたって、PHP/CSSの知識がなくても、ブラウザ上での操作だけで、ウェブサイトを構築することはできます。ですが、PHP/CSSの書き換えを行うにしても、1から10まで自分で書かなくてはいけないというわけではないので、必要な時に、一つ一つの要素を学んでいくこともできるので、スキルアップという意味でも、WordPressはとてもいいのではないでしょうか。