ホーム > 亀の子記（日記）ど素人が独学でHTMLやPHPを勉強してサイトを作る日記

【93日目】関連記事をおしゃれに表示させたい！-完成！

Posted:2020.12.01　 Last Update:2020.12.01

「関連記事の投稿をおしゃれに表示したい」という課題に取り掛かって7日目。昨日までにスタイルシートを完成させ、PHPで関連情報を呼び出すことに成功しました。まだ本文に表示させることができていないので、その作業をしていきたいと思います！

昨日までの成果と今日やりたいこと

まず、関連リンクを入れる箱はスクリーンショットのように完成しています。

昨日までに作ったPHPがこんな感じ。箱の情報を、本文書き出しの$articlebodyに代入できていません。そして、最後に呼び出しているリンクの本文が記事に呼び出されてしまっています…。

<?php
$linkset = '/<a id="bloglink" href="(.*?)">(.*?)<\/a>/i';
preg_match_all($linkset , $articlebody, $matches, PREG_SET_ORDER );
$i = 0;
foreach($matches as $link){
    $path = preg_replace('/(.+?)\/(.+?)/','$1s/$2',$link[1]);
    require ($mypath.$path.".txt");
    $bloglink = preg_replace( '/<(.+?) (.+?)=(.+?) (.+?)=(.+?)>(.+?)<\/(.+?)>/',
        '<$1 href="$5" target="_blank">
        <div id="bloglink">
            <div id="bloglinkimg"><img src="'. $articletimg .'" alt="'. $articletitle .'"></div>
            <div id="bloglinktext">
            <b>'.$articletitle.'</b><br>
            <p>'.$articledescription.'</p>
            </div>
        </div>
        </$7>
        ', $link[0]);
        echo $bloglink;
    $articlebody = preg_replace($linkset, $bloglink, $articlebody, 1);
}
?>

PHPを修正していく

さて、どうしよう、と自分の書いたPHPを眺めてみました。そして、重要なことに気付いてしまった！

関連記事の情報を呼び出すために「require ($mypath.$path.".txt");」と入れています。このファイルにも「$articlebody」という変数が入っているんですよね。本文を書き出すときに、リンク先の$articlebodyを書き出してしまっていて、そこには関連記事のリンクがない！

リンク元の記事をいったん他の変数に代入して、最後に改めて「$articlebody」に代入しよう！

うまくいったのですが、今度はリンク先が間違っていることに気付きました。「$1 href="$5"」の部分が呼び出し元のURLになってる…。「href="'.$link[1]」に変更しました。これでうまく動いた！

テストしてみよう！

テスト環境ではうまくいったので、本番環境に移植してみます。ついでに、開発記事を紹介！

検索するだけで遊べちゃう！6種類のGoogleミニゲーム【2020年版】

Google検索するだけで遊べるゲーム、ご存じですか？アプリ不要、ダウンロード不要、Google Chromeを開くだけで、ちょっとした暇つぶしができちゃいます！定番のソリティアやマインスイーパから、懐かしのパックマンまで。今すぐ遊べるGoogleのミニゲームをご紹介！

いかがでしょうか？ちなみに、PHPはこんな感じです。

<?php
$myarticlebody = $articlebody;
$linkset = '/<a id="bloglink" href="(.*?)">(.*?)<\/a>/i';
preg_match_all($linkset, $myarticlebody, $matches, PREG_SET_ORDER );
$i = 0;
foreach($matches as $link){
    $path = preg_replace('/(.+?)\/(.+?)/','$1s/$2',$link[1]);
    require ($mypath.$path.".txt");
    $bloglink = preg_replace( '/<(.+?) (.+?)=(.+?) (.+?)=(.+?)>(.+?)<\/(.+?)>/',
        '<$1 href="'.$link[1].'" target="_blank">
        <div id="bloglink">
            <div id="bloglinkimg"><img src="'. $articletimg .'" alt="'. $articletitle .'"></div>
            <div id="bloglinktext">
            <b>'.$articletitle.'</b><br>
            <p>'.$articledescription.'</p>
            </div>
        </div>
        </$7>
        ', $link[0]);
    $myarticlebody = preg_replace($linkset, $bloglink,  $myarticlebody, 1);
}
$articlebody = $myarticlebody
?>

スタイルシートを修正

実際にリンクを入れて表示させたら、枠に収まっていなかったので少し修正します。ちなみに今現在はこんな感じ。

こう修正しました。

検索するだけで遊べちゃう！6種類のGoogleミニゲーム【2020年版】

今日はここまで

これで関連記事のリンク完成です！と同時に時間が来てしまいました！過去の日記にもちょこちょこ関連記事を入れていきたいのですが、それはまた後日少しずつやりたいと思います。

明日は何しようかな？やりたいことはまだこんなにあります！

人気投稿の準備として、アクセス解析をするPHPを作成する
関連記事用のパーツを作る　←完成！
mainフォルダをmenuフォルダに書き換える
RSSの内容を共通仕様から入れ込む
サイトマップをGoogleとBingに送信する手順を作る
記事にカテゴリーを入れ込む
Google Lighthouseに指摘された内容に対応する

では、また明日！

おまけのロードマップ

サイト作成がどのくらい進んでいるかロードマップで進捗を確認すると、ここまで進んでいます。

準備 - サイトの全体像を決める
使用するプログラミング言語を決めて環境を整える
サイトの基本構造を作って公開する
収益化に最適なサイトにアップグレードする
GoogleアドセンスとAmazonアソシエイトの申し込みをする　←完了！
ローカルで簡単に入力ができるようにフォームを作る
フォローアップ - より収益化に向いたサイト構造に変更する

【93日目】関連記事をおしゃれに表示させたい！-完成！

昨日までの成果と今日やりたいこと

PHPを修正していく

テストしてみよう！

関連記事

スタイルシートを修正

関連記事

今日はここまで

おまけのロードマップ

記事をシェアする

亀の子に連絡

ランキング参加中！ぽちっとしてね

広告