ホームページの新着情報更新を簡単にするCGI/PHP

ホームページ作成作り方

whatsnew2

新着情報をトップページに表示する方法、第2弾です。
前回 ⇒ システムを使わずに作る「更新情報を表示させる方法」

下層ページを追加・更新するたびに、
トップページの「更新情報」も書き換えてアップロード、というのは面倒ですよね。

毎回HTMLを書き換えなくても、ブラウザだけで更新できるようにするには、
PHPやCGIといった「Webプログラム」を設置する必要があります。

プログラミングやシステムというと、とても難しいイメージですが、
1からwebプログラミングの勉強を始めなくても、
CGIやPHPなどのプログラムを、無料で配布して下さっているサイトがたくさんあるので
有難く使わせて頂きましょう。

ブログみたいに「お知らせ情報」を更新できるようにする

無料・有料版いろいろなプログラムが配布されていますが、
その中でも、一番分かりやすくて使いやいと思ったのがコチラ↓

PHP新着情報・お知らせ・ニュースCMSプログラム フリー(無料)版

商用可で、企業・個人関わらず無料で使用することができます。
(著作権表示を削除したい場合は有料)

説明も詳しく書いてあり、比較的カンタンなのですが、
図解がないので用語が分からない方には難しく感じられるかもしれません?

今回は、設置方法や使い方も含めてご紹介してみようと思います。

どんなことができるの?

管理画面に、ユーザIDとパスワードで「ログイン」して、
こんな感じの「投稿欄」に必要事項を書き入れるだけで・・・

news0arrow1「新着情報欄」が自動的に生成されます。

news1

内容によって「カテゴリー分け」など、細かい設定ができる所も便利です。

 

設置の前に確認しておきたいこと

プログラムを設置する前に、必ず確認しなければならないのは「サーバー」です。

プログラムはHTMLと違って、そのままパソコン上で動かすことができません。
ホームページを公開するためのスペースを持っていても、
サーバーによっては、CGIやPHPを使えない所もあるので注意しましょう。

今回ご紹介している新着情報のプログラムが正常に動くのは、
エックスサーバー と さくらのレンタルサーバ です。

ロリポップ!もどうにか動きそうです。

もし、今お使いのサーバーで試して動かなかった方は、
動作確認済みサーバーの無料お試し期間を利用してテストしてみると良いかもしれません。
※ファーストサーバ、スマイルサーバー、yahooなどは不具合報告があるようです。

プログラムを設定してみよう

利用規約を確認して、プログラムをダウンロードしましょう。
→ ダウンロードはこちら

news2

ファイルZIP形式に圧縮されているので、
デスクトップ等に保存したあと解凍(展開)しましょう。

たくさんのファイルが入っていますが、設定が必要なのは1個だけです。

news3

いろいろ設定できますが、まずは「ログイン情報」だけ書き換えてテストしましょう。
※一気にいろいろ触ると、何が原因で動かないのか分からなくなりますので(汗

テキストエディタで、config.phpを開きます。
(文字化けする人は「おすすめテキストエディタ」のページもご参照ください)

news4

「管理画面ログイン情報」と書かれた場所を探し、ログインIDとパスワードを書き換えます。
この時、前後にあるカンマを間違って消したりすると、正常動作しなくなるので注意。

書き換えが終わったら、保存して、ファイルを閉じてOK。

 

サーバーに設置して、動かしてみよう

今回は、テストのため「さくらのサーバー」へ設置してみます。

FTPソフトを使って、パソコンの中身をサーバーへアップロードしていきます。

フォルダ名が分かりにくいと、後が大変なので
今回は「news」というフォルダを作って、その中にプログラムを入れる事にします。

newsup0

レンタルサーバー側の「news」フォルダを開き、
先程設定したプログラムをすべて、アップロードします。

newsup1

サーバー側のファイルを右クリックして、
それぞれファイルごとに指定された「パーミッション(属性変更)」を設定します。

パーミッション

 

▼パーミッション変更が必要なのは、次の4か所です。

パーミッション設定

もし、後からconfig.phpを書き換えたい場合、444だと上書きできなくなることがあります。一時的に「666」にして、変更し終わったら「444」に戻してください。

ここまで終われば、設置完了です。

 

ブラウザで動作確認してみよう

http://(あなたのサイトのURL)/news/pkobo_news/admin/  を
ブラウザで表示させて、下記の画面が表示されれば成功です。

config.phpに記入した、ユーザーIDとパスワードでログインしてみましょう。

admin

「新規登録」ボタンを押すと、登録画面へ移動します。

2016-08-15_18h24_46

必要な項目を入力し「登録」ボタンを押せば、新しいお知らせを追加できます。

2016-08-15_18h25_19

  • 登録年月日 — 登録日として表示される日付。
  • 公開・非公開 — チェックすると公開になります(登録だけで非公開にもできる)
  • タイトル — お知らせの見出し部分になります。
  • カテゴリ — config.php内で名前変更も可能。
  • 直リンクURL — URLを入力すると、タイトルをクリックしたときに詳細ページではなく、指定したURLへ直接移動します。
  • 直リンクファイル — ファイルを登録すると、タイトルをクリックしたときに、詳細ページではなく直接「ファイル」が表示されます。
  • 本文 — タイトル下の抜粋文として表示されるほか、直リンクを指定しなかった場合には「詳細」として表示させることができます。
  • ファイル — 画像を登録すると、サムネイルや詳細ページ内に表示されます。

登録した内容の変更・削除も、管理画面から行うことができます。

2016-08-15_18h41_02

 

実際の表示を確認するには、ブラウザで
http://(あなたのサイトのURL)/news/top-umekomi.php を開いてみて下さい。

2016-08-15_19h12_41

先程登録した内容が表示されれば、成功です!

 

トップページに新着情報を表示させるには?

このままでは「新着情報ページができる」だけで、
トップページに「新着情報が埋め込まれる」という感じにはなりません。

PHPが分かる方は、
トップページをindex.phpにして読み込むのがベストだと思いますが、

PHPが苦手な方や、既存のHTMLの中に、新着情報を追加したい場合は、
「iframeでHTMLに埋め込む」という方法が一番カンタンです。

トップページの中に、下記のタグを追加するだけ。

<iframe src="news/top-umekomi.php" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

これで、上手く表示されない場合は、
top-umekomi.phpへの『パス』が間違っているのかも…

そんな時は、src=”top-umekomi.php“ の部分を、
先ほど表示させた、URLに書き換えると上手くいくかもしれません(?)

<iframe src="http://(あなたのサイトのURL)/news/top-umekomi.php" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

ちなみに、枠のサイズは、
width=横幅、height=縦幅 の数字を変更すれば変えられるので、 
デザインに合わせて調整して下さいね。

 

その他のWEBプログラム配布サイト

ウェブクローゼット(PHP)

画像のアップロード機能、サムネイル(縮小画像)生成・RSS配信機能付の
新着情報・更新履歴管理ツール。php5で動作確認されてます。
[ ImageInfo 詳細・動作サンプル・ダウンロード]

レッツPHP!(PHP)

HTMLタグも使用できます。
update.php[ 本体 ]と、new.txt[ログ]2つのファイルだけで動くので、
設置も比較的楽かと思います。
[IndexUpdater詳細・動作サンプル・ダウンロード]

設置の仕方は、各詳細をご覧ください。

トップページの埋め込みは、先ほどと同じように「iframe」を使うと簡単です。

※パーミッションって何??という方は、FFFTPの使い方が参考になるかもしれません。

※それぞれのプログラムには使用条件(規約)があります。
 ダウンロードする前によく読んでくださいね!

デザイン変更・カスタマイズしたい場合は?

top-umekomi.php や style.css を編集する事で、
デザインなども変える事ができるのですが、

細かい表示の方法やレイアウトの変更は、
PHPやHTML、CSSが分からないと難しいかも知れません。

プログラムの配布元に頼めば、有料でカスタマイズしてもらう事も可能ですが、
自分で自由に編集できるようになると、いろいろなことが出来るようになります。

もし、基本を学びたい場合は、
本だけでプログラミングを学ぶのはとても難しいので
空き時間を使って、個人レッスンを受けられるオンラインスクールなどを利用してみると、
低価格で、自宅に居ながらスキルを身に着ける事もできます。

無料体験レッスンもあるので、
プログラミングの世界を覗いてみたい方は
チャレンジしてみてもいいかもしれませんね。

プログラムが少し触れるようになるだけで、
出来る事が、グンと広がりますよ♪

ホームページ作成


PAGE TOP