Wordpressは、CMSという種類のシステムに分類されます。
CMSというのは、ContentsManagementSystemの略で、わかりやすく言うと、Webサイトの情報を更新する時に管理画面を使って便利に使うことができるシステムの事です。
ShopifyやJoomla、Wix、Jindoなども有名なんですが、カスタマイズ性が高かったり、自分のサーバーで運用ができるという点、比較的構築工数が安い（モノによる）という点でWordpressが人気なのだそうですね。
海外の調査サイトで、CMSの利用割合というのを調べた結果が、下記のサイトに掲載されています。
https://w3techs.com/technologies/overview/content_management
今現在、Wordpressは、63%ほどもあり、世の中の半分以上のCMSサイトはWordpressで構築されているという事がわかります。
そんな大人気のWordpressの構築の続きを行いますね。
index.phpを書き直し
ホームページの基本構造まわりを解説したいと思います。
基本的なファイルとして、前回中身を何も書き込まなかった、index.phpを次のように書き換えましょう。
<?php get_header();?>
<?php get_content();?>
<?php get_footer();?>
解説
１行目は、get_header() 関数によって、header.phpが呼び込まれます。（あとで作ります。）
3行目は、get_footer() 関数によって、footer.phpが呼び込まれます。（あとで作ります。）
現時点でページを開いてみると、エラーが表示されるのは、2行目のget_content()という関数が、Wordpressには存在しないからです。
この３つの関数に関して、これから作成していきます。
header.phpを追加
header.phpというファイルを作って、次の様に書き込んでみましょう。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="utf-8">
<title><?php echo get_bloginfo('name');?></title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="icon" href="<? echo get_site_icon_url();?>" />
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"/>
<script src="<?php echo get_template_directory_uri();?>/js/main.js"></script>
</head>
<body>
<header>
<a class='title-area' href='/'>
<div class='catch gothic'><?php echo get_bloginfo('description');?></div>
<div class='title mincho bold'>
<img class='logo' src='<?php echo get_template_directory_uri();?>/img/logo.png'>
<?php echo get_bloginfo('name');?></div>
</a>
<nav>
<input id='menu_toggle' type='checkbox' style='display:none;'>
<ul></ul>
<label for='menu_toggle'>
<span></span>
<span></span>
<span></span>
</label>
</nav>
</header>
<main>
解説
中で使っている関数をいくつか紹介します。
language_attributes()
管理画面でセットした言語の文字列を取得します。
get_bloginfo('name')
ブログ情報のnameは、ブログタイトルが取得できます。
get_site_icon_url()
faviconの登録がされている場合、URLがここに登録されます。
get_stylesheet_uri()
前回作った、style.cssのurlが取得されます。
get_template_directory_uri()
テーマのrootパスが取得されます。
jsファイルやテーマ内に配置した画像などは、このroot機能を使って、srcを書き込みます。
他にもたくさんのWordpress関数があるので、関数リファレンスページを眺めてみて、自分でセットしてみると、勉強になりますよ。
https://wpdocs.osdn.jp/関数リファレンス
footer.phpを追加
同じ手順で、footer.phpも追加しちゃってください。
</main>
<footer>
<nav>
<input id='menu_toggle' type='checkbox' style='display:none;'>
<ul></ul>
<div class='copy'>© 2023 Copyright MYNT, Inc. All Rights Reserved.</div>
</footer>
</body>
</html>
functions.phpを追加
これまでの流れで、contents.phpを追加すると思った人、ここがWordpressのクセが強いポイントです。
Wordpressのwebサイトの関数を管理する基本ファイルが、functions.phpです。
get_contents()という関数は、データベースに登録されている、「投稿ページ」または、「固定ページ」を表示するためのエリアになるので、phpとして記述することになります。
<?php
function get_content(){
// サイトトップページ
if(is_front_page()){
echo view_page();
}
// 固定ページ
else if(is_page()){
echo view_page();
}
// 投稿ページ
else if(is_single()){
echo view_page();
}
// 投稿一覧ページ
else if(is_home()){
echo view_posts();
}
// 検索ページ
else if(is_search()){
echo view_search();
}
}
function view_page(){
return 'トップページ（固定ページ）、投稿ページ、固定ページのどれかを表示';
}
function view_posts(){
return '投稿一覧ページ';
}
function view_search(){
return '検索ページ';
}
解説
functions.phpは、webサイト内で実行したいphpの命令を一気に記述してもいいし、別ファイルでオブジェクティブに管理してもいいし、やり方は構築するプログラマー次第です。
今回はわかりやすく、functions.phpに直接記述する方法にしたいと思います。
get_content()関数は、今現在表示するのがどのページなのかを、urlから読み取って、分岐させるようにしています。
基本的には、view_page()関数を呼び出すことになるんですが、固定ページと投稿ページが同じ呼ばれ方をするので、一緒くたに書いてありますが、個人的に分けた仕様にしたい場合は、別の関数にセットしてもらっても構いません。
is_front_page()
トップページの場合にtrueが返ります
is_page()
固定ページの場合にtrueが返ります
is_single()
ブログ記事（投稿ページ）の場合にtrueが返ります
is_home()
投稿一覧ページの場合にtrueが返ります。（トップページと分けた場合に使います）
view_search()
検索結果ページ一覧の場合にtrueが返ります
ブラウザで見てみよう
この状態で、Webサイトをブラウザで見てみると、次のような表示になっていると思います。
なんだかしょっぱい表示にがっかりした人、この状態はデザインも何も入れてないので、ゆっくりと進んでいきましょうね。
ちなみに、imgフォルダを作って、logo.pngという名前で画像ファイルを設置すると、プレビュー表示で画像が表示されますよ。
0 件のコメント:
コメントを投稿