MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


【mito様】静的サイトの一部にWordPressを導入でエラー

静的サイト(HTML)とWordPressの混在についてご相談頂きました。静的サイトにWPを読み込む際の注意点や、テーマを解析していく方法をご紹介していきます。

静的サイトの一部分にだけ、Wordpressを入れたい

はじめまして。今回、初めてCMSに挑戦します。
普段はデザインと静的ページのコーディングが中心で、
phpやCMSは全くの初心者です。

やりたいこと
・静的サイトの一部分にだけ、Wordpressを入れたい。
・NEWSをWordpressで投稿できるようにし、
 NEWS一覧ページに全ての記事、
 トップページにNEWSの最新記事3件を表示させたい。

エラー内容

WordPressをインストールして、試しに数記事投稿し、
トップページに最新記事5件表示する方法を試してみていたところ、
Internal Server Errorでページが表示されなくなってしまいました…。

下記のページを参考にしています。(さくらインターネットを使用しています)
http://omoteurasouko.hatenablog.com/entry/sakura-html-php

上記ページ「エラーが出た場合の対応方法」の
1、2、4は確認済みですが、3と5は正しいかどうかが分かりません。

その他のサイトも参考にして色々試してみたのですが、
サイトにアクセスするとページが表示されるのではなく
ページがダウンロードされてしまったりして、解決できませんでした。

エラーログ(添付画像)を見てみましたが、こちらも対処方法が分かりませんでした。

htaccessの記述を削除するとページが表示されるので、
htaccessが問題なのでしょうか…?
下記、htaccessの内容になります。

===============
# BEGIN WordPress
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress
Action myphp-script /php.cgi
AddHandler myphp-script .php .html
===============

Action myphp-script /php.cgi
AddHandler myphp-script .php .html
を削除するとページが表示されます。

お聞きしたいこと

・上記のエラーを解決するには、どうしたら良いでしょうか?
・とりあえず、試しにトップページに最新記事を表示させてみようとしていますが、 本来はどういった手順で進めるべきなのでしょうか?
・NEWSの記事は、まだ試しに投稿してみただけなのですが、そのままだとWordpressのテンプレートのデザインになっていますよね?
この後、自分で作ったサイトのデザインの中に 記事一覧や詳細ページを表示させたいのですが、 こちらはどう検索すると、やり方が出てくるでしょうか?

以上、ものすごく初歩的な内容で大変恐縮ですが、
お返事いただけますと幸いです。
お手数をおかけしますが、よろしくお願いいたします。

返答

mitoさま
ご質問頂きありがとうございます!

まず、HTMLとWordPressの混在については、サーバーや既存のHTMLによっても変わってくるので決定的に「こうすれば直る」というのをアドバイスしにくいのですが、結構前に同じようにWordPressを導入したことがあるのでこちらの記事も参考にしてみてください。
静的HTMLにWordPressの新着を表示する際に参考にした記事

ただ、一番気になったのはやはり.htaccessですね。

もし静的HTMLサイトにWordPressを混在させるなら、/blog や /news など、ディレクトリ(フォルダ)を作ってその中にWordPressを入れた方がトラブルは少ないと思います。

ルート(ドメイン直下のディレクトリ)に記載すべきhtaccessの内容(myphp-script・・・)と、WordPressディレクトリに記載されるhtaccessの記述(# BEGIN WordPress~)が混在しているのが気になりました。

WordPressのトップページが example.com/blog になるようにすれば、いくらかトラブルが減るのではないかと思います。
(現在は、index.htmlもindex.php、wp-config.phpなど他のWordPress関連ファイルも混在している状態??)

混在させるとしたら手順的には、
1.WordPressをサブディレクトリにインストール
2.静的サイトの方でもPHPが動くようにする(htaccessに記述を加える形で間違いはないと思います。)
3.静的サイトにWordPressの新着情報を表示させるコードを追加する
という流れになります。

現在は2の状態ができていないか、できているがなんらかのエラーで表示されない状態と言えるでしょう。
参考とされているサイトの3と5が両方該当している可能性があります。

自分で作ったサイトのデザインの中に記事一覧や詳細ページを表示させたい

しかし、mitoさんの最終目的が自分で作ったサイトのデザインの中に記事一覧や詳細ページを表示させたいということであれば、やはり
1.WordPressのテーマを作る
2.WordPressのテーマをカスタマイズする
ということになります。これができれば静的サイトとの混在で悩む事はありませんからね。

僕もHTML+CSSの知識だけでWordPressに触り始めましたが、大丈夫です。ノンプログラマでもやり方だけ覚えればWordPressのテーマはカスタマイズできます。

「WordPress テーマ 作り方」
などで調べれば情報はたくさん出てくるでしょう。

実はWordPressテーマは最低限
index.php
function.php
style.css
だけあれば動作はします。

さらに
固定ページを表示させるならpage.php
投稿を表示させるならsingle.php
などと、ファイル名で仕事が決まっています。
WordPress Codex テンプレート階層

さらに、条件分岐タグによって様々なケースに対応しています。
WordPres Codex 条件分岐タグ

ある程度勉強は必要になりますが、怖がらずまずは今お使いのテーマの構造をよく見てみましょう。WordPressテーマを構成するPHPはHTMLと混在して利用されています。

mitoさんはHTMLが分かるようなので、PHPの部分とHTMLの部分の違いは分かるはずです。HTMLでは無い部分で何が行われているか。それを調べながら勉強していきましょう。

テーマの解析のやり方

WordPressディレクトリ/wp-content/themes/ の場所にテーマフォルダがあります。

デフォルトテーマTwentySeventeenなら/twentyseventeen/など。

投稿した記事を表示させたならsingle.php が読み込まれます。

// single.php 23行目
get_template_part( 'template-parts/post/content', get_post_format() );

ここで template-parts フォルダの中の postフォルダの中のcontent.phpが読み込まれます。

// twentyseventeen/template-parts/post/content.php 34行目~
if ( is_single() ) { //投稿の記事ページなら
  the_title( '<h1 class="entry-title">', '</h1>' ); //h1タグの中に投稿のタイトルを出力
} //以下略

そして、the_titleというWordPress独自のタグでWordPressの管理画面で入力した投稿の情報を出力しています。
WordPress テンプレートタグ the_title

このように、HTMLが分かっていれば、あとはWordPressの条件分岐やタグの意味を調べていくことで勉強が可能です。その過程でPHPも勉強できるでしょう。(正直if文だけ分かればかなりのことができるようになります)

1.テンプレート階層
2.条件分岐
3.テンプレートタグ

is_single ってなんだろう?と思ったら「WordPress is_single」で調べる。
the_title ってなんだろう?と思ったら「WordPress the_title」で調べる。
既存テーマの構造をよく見たり、一部をカスタマイズしたり。これを繰り返すことで少しずつWordPressテーマの成り立ちが分かっていくと思います。

おすすめコンテンツ

“【mito様】静的サイトの一部にWordPressを導入でエラー” への2件の返信

  1. こんばんは、昨日Webサイトにてご質問させていただいたmitoと申します。
    この度は迅速にお返事いただき、ありがとうございました。

    まだ実験段階ではありますが、Wordpressのテーマを作る
    という方法で無事解決しそうですので、ご報告いたします。

    昨日の時点では、静的サイトの一部にWordpressを導入する方法で私のやりたい事が実現できるはず!と思い込んでいたのですが、始めたばかりで早速つまずいてしまい、諦める一歩手前でした。

    ですが、昨日ご教授いただいた通り、実験的に簡単なテーマを作ってトップページへのNEWS記事表示を試してみたところ、無事に表示させる事ができました!
    特定のカテゴリの記事だけを表示させたり、最新記事の表示件数を変更させたりと、他にもやりたいと思っていた事が実現でき、2日前からずっと唸っていたのが嘘みたいに楽しく作業しています。

    WordPressについて検索すると「テーマを作る」という言葉はよく見かけましたが、それがどういう意味なのかも分からずにスルーしてきたので、まさにこれがやりたかったんだと、目から鱗です、、、。

    今回は最初に質問した方法とは別の方法での解決となりましたが、htaccessの書き方も改めて勉強させていただきます。

    ちんぷんかんぷんな質問にもご丁寧にお返事くださり、本当にありがとうございました。
    諦めてしまわなくて良かったです。

    それでは、重ねてのお礼になりますが、この度はご丁寧で迅速なご対応、本当にありがとうございました。
    今後もFujita様のサイトを参考に、Wordpressの勉強に励んでまいります。

    1. mitoさま

      ご連絡ありがとうございました!
      テーマの作成について、ヒントになったようでなによりです。

      HTMLが分かっていれば、ある程度はテーマの中でPHPが何を行っているか追っていけると思います。
      自分の作ったHTMLに、テーマのWordPressタグを少しずつ持ってくるという勉強方法もあります。

      functions.php だけはエラーがあるとサイトが表示されなくなる(管理画面にも行けなくなる)ので、バックアップを取っていつでもFTPなどでファイルを変更できるようにしておきましょう!
      引き続き頑張ってください!

コメントを残す

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

CAPTCHA