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

How-to
スポンサーリンク

新着情報をトップページに表示する方法、第2弾です。

前回の『HTMLで更新する方法』はこちら↓

新着情報の作り方|システムを使わず更新情報を表示させる2つの方法
ホームページのページを更新・追加した時、トップページに『新着情報』として表示すると、より多くの人に見てもらいやすくなります。ホームページビルダーやHTML、ホー...

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

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

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

スポンサーリンク

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

2016-08-15_19h12_41

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

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

設置も比較的カンタンなのですが、説明文だけではピンとこない方も多いと思うので、今回はわかりやすい図解をメインに、設置方法と使い方をご紹介していきます。

どんなことができるの?

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

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

news1

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

 

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

HTMLと違って、プログラムはそのままパソコン上で動かすことができないので、サーバーに設置して使うことになるのですが、

プログラムを設置する前に「今使っているレンタルサーバーがプログラムに対応しているか」を確認しておく必要があります。

サーバーが対応していなければ、設置や設定の方法が正しくてもプログラムは正常に動きません。

今回ご紹介している新着情報のプログラムが正常に動くのは、以下の動作確認済みレンタルサーバーになります。

5.0
エックスサーバー

4.0
カゴヤのレンタルサーバー

4.0
さくらのレンタルサーバ スタンダード

※格安価格が人気の「ロリポップ! 」は、設定によっては正常に動かないことがあるようなのでご注意ください。

CPI、WebArena、スマイルサーバー、ファーストサーバなどは不具合が報告されているようです。

もし、今お使いのサーバーで試して動かなかった方は、動作確認済みサーバーの無料お試し期間を利用してテストしてみるといいかもしれません。

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

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

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=縦幅 の数字を変更すれば変えられるので、
デザインに合わせて調整して下さいね。

その他フリーPHPスクリプト配布サイト

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

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

 

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

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

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

デザイン変更・カスタマイズできる?

top-umekomi.php や style.css を編集する事で、デザインなども変える事ができます。
でも、細かい表示の方法やレイアウトの変更はPHPやHTML、CSSが分からないと難しいかもしれません。

※プログラムの配布元に頼めば、有料でカスタマイズしてもらう事も可能です。

HTMLでホームページを作って更新するだけでも大変なのに、新着情報プログラムを設置して、さらにカスタマイズはさすがにハードル高すぎ・・・

ブログと同じ感覚でホームページが簡単に作れる「Wordpress(ワードプレス)」を使えば、記事を更新するだけで、トップページに自動で新着情報を出すこともできますよ。

WordPressなら新着情報もページ更新もカンタン!

新着情報のプログラムは「更新情報部分だけ」ですが、Wordpress(ワードプレス)を使えば、ページの更新もブラウザからできるようになり、しかも、新着情報も自動でトップページに表示できます。

でもワードプレスって設置が難しそうで・・・

初心者向けのレンタルサーバーを使えば、ボタン一つ押すだけでワードプレスが設置できる機能があるから、更新プログラムを設置するよりカンタンかも?

 

初心者にやさしいWordPressおすすめレンタルサーバー比較5選!
レンタルサーバーとは、ワードプレスのブログやホームページを建設するための「土地」のようなもの。   土台となる大切な部分ですが「専門用語が多すぎて難しすぎる!...

 

でも、ワードプレスってブログでしょ?
私はホームページが作りたいの!

ホームページ用のテンプレートも多いんですよ!
選ぶだけでプロが作ったようなホームページが作れるんです。

企業サイト用「日本語wordpressテーマ」無料/有料25選
商用ホームページ に最適な無料・有料のwordpressテーマの中でも、日本語マニュアルがあり、ビジネス利用に最適化された人気のおすすめテーマだけを集めました。

こんなにキレイなページが自分で作れるようになるなんて!
設置もカンタンなら、私もやってみようかな!

初心者でも簡単に新着情報付きのホームページが作れるサービスも、どんどん出てきているので、目的に応じてツールを活用してみるのもいいかもしれません。

 

初心者向けじゃなくて、自分で思い通りに作りたい!という向上心が高いあなたは、マンツーマン必要な所をピンポイントで教えてもらえるオンラインスクールを利用するのがおススメです。

最近は、現役エンジニアが個別指導をしてくれる「オンラインのプログラミングスクール」がとても人気があります。

基礎から、Webサイト制作・プログラミング/システム開発を本格的に学ぶことができます。

まずは無料で体験してみて「プログラミング楽しい」と思えた方は、仕事にできる所まで頑張ってみるといいかもしれません。

一度スキルを身に着ければ、できる事が断然広がります。
ぜひチャレンジしてみてくださいね!

タイトルとURLをコピーしました