ダーク | First Wave

ワードプレスのテーブルwp_postsデータを取ってきてLaravelで表示.

2025.07.15

おはようございます.ワードプレスのテーブル（wp_posts）データを取ってきて別サイト（Laravel）にて表示してます.別サイトには広告が付かない感じです.因みにデータは自サイトのブログデータを使用していますが随時去年あたりのデータから取得するようにSQLに記述しています.

尚、どうやって取得しているかをお話するとSQLのコネクション変更する設定をコンフィグフォルダのデータベースファイルに記述してモデルにもその事を明記しています.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;


class Blog extends Model
{
    protected $connection = 'second_db';
    protected $table = 'wp_posts';
}

そしてそれらを呼び出しているだけです、とても簡単なコードで動いています.そんな感じなのでブレイドのコードをシェアします、流石にコントローラーは見せられないけどYoutubeのリンクやXのリンクは出力する前に置き換えていることをヒントとしてお伝えしときますね.

<!doctype html>
<html lang="ja" class="transition-colors duration-300">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <meta name="robots" content="noindex,nofollow" />
    <title>blog - [taoka toshiaki]</title>
    <link rel="icon" href="https://taoka-toshiaki.com/images/g4DV7mRe_400x400.jpg?t=1752317617"
        sizes="16x16 24x24 32x32 48x48 64x64">
    <!-- Prism CSS -->
    <link id="prism-theme" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/line-numbers/prism-line-numbers.css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css"
        rel="stylesheet" />
    <style>
        body {
            background-color: #f9fafb;
            color: #1f2937;
            transition: background-color 0.3s, color 0.3s;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .dark body {
            background-color: #242425;
            color: #f9fafb;
        }

        article {
            background-color: #fff;
            transition: background-color 0.3s;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .dark article {
            background-color: #3d3d47;
        }

        time {
            color: #6b7280;
        }

        .dark time {
            color: #9ca3af;
        }

        .prose {
            color: inherit;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        pre[class*="language-"] {
            overflow-x: auto;
            padding: 1em;
            border-radius: 0.5rem;
        }

        code[class*="language-"] {
            white-space: pre;
        }

        a,
        a:hover {
            border-bottom: solid 2px #fbf81c;
        }
    </style>
    @include('header_script')
</head>

<body class="transition-colors duration-300">

    <div class="max-w-3xl mx-auto p-6">
        <h1 class="text-2xl font-bold mb-6"><a href="/" class="text-current">🏠️Top Page</a></h1>
        <p class="mb-3 font-bold"><a href="/blog">🖊️</a>おもしろき こともなき世をおもしろく 住みなすものは 心なりけり.</p>
        @if (request()->input('page') == 108)
            <a href="/blog" class="text-[54px]">📖</a>
            <h1 class="text-2xl font-bold text-[108px] mb-6">108🧘️</h1>
        @endif

        <button id="darkModeToggle"
            class="mb-6 px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded">
            ダークモード切り替え
        </button>

        <div class="space-y-10">
            @foreach ($items as $item)
                <article class="shadow-md rounded-lg p-6 transition-colors duration-300">
                    <h2 class="text-xl font-semibold mb-2 break-words">⏩️{{ $item->post_title }}</h2>
                    <time class="text-sm block mb-4">{{ $item->post_date }}</time>
                    <div class="prose prose-sm max-w-none break-words">
                        {!! $item->post_content !!}
                    </div>
                </article>
            @endforeach
        </div>

        <div class="mt-10">
            {{ $items->links() }}
        </div>
    </div>
    <!-- トップに戻るボタン -->
    <button id="scrollTopBtn"
        class="fixed bottom-6 right-6 hidden bg-gray-600 text-white px-4 py-2 rounded-full shadow-lg hover:bg-gray-700 transition-opacity">
        ▲ 上へ戻る
    </button>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script>
    <!-- Prism.jsのコアファイル -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
    <!-- Prism.jsのオートローダ -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
    <!-- Toolbarプラグインのスクリプト -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js"></script>
    <!-- その他のプラグインのスクリプト -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/highlight-keywords/prism-highlight-keywords.min.js"></script>

    <script>
        const toggleBtn = document.getElementById('darkModeToggle');
        const prismTheme = document.getElementById('prism-theme');
        const darkThemeHref = 'https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-tomorrow.css';
        const lightThemeHref = 'https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.css';

        if (localStorage.getItem('darkMode') === 'true') {
            document.documentElement.classList.add('dark');
            prismTheme.href = darkThemeHref;
        }

        toggleBtn.addEventListener('click', () => {
            const isDark = document.documentElement.classList.toggle('dark');
            prismTheme.href = isDark ? darkThemeHref : lightThemeHref;
            localStorage.setItem('darkMode', isDark);
        });

        document.addEventListener("DOMContentLoaded", () => {
            document.querySelectorAll('pre[class*="lang-"]').forEach(pre => {
                const match = pre.className.match(/lang-(\w+)/);
                if (match) {
                    const lang = match[1];
                    pre.className = `language-${lang} line-numbers`;
                    const code = pre.querySelector('code');
                    if (code) code.className = `language-${lang}`;
                }
            });
            // トップへ戻るボタンの処理
            const scrollTopBtn = document.getElementById("scrollTopBtn");
            window.addEventListener("scroll", () => {
                scrollTopBtn.classList.toggle("hidden", window.scrollY < 200);
            });

            scrollTopBtn.addEventListener("click", () => {
                window.scrollTo({
                    top: 0,
                    behavior: "smooth"
                });
            });
        });

        //全選択ボタンを作成＆クラス名付与
        Prism.plugins.toolbar.registerButton('select-code', function(env) {
            var newButton = document.createElement('button');
            newButton.className = 'code-select-btn';
            newButton.innerHTML = 'コードを選択';

            newButton.addEventListener('click', function() {
                if (document.body.createTextRange) { // ms
                    var range = document.body.createTextRange();
                    range.moveToElementText(env.element);
                    range.select();
                } else if (window.getSelection) { // moz, opera, webkit
                    var selection = window.getSelection();
                    var range = document.createRange();
                    range.selectNodeContents(env.element);
                    selection.removeAllRanges();
                    selection.addRange(range);
                }
            });
            return newButton;
        });

        //使用言語表示ボタンを作成＆クラス名付与
        Prism.plugins.toolbar.registerButton('show-lang-btn', function(env) {
            var newButton2 = document.createElement('button');
            newButton2.className = 'show-lang-btn';
            newButton2.innerHTML = env.language;
            return newButton2;
        });

        $(function() {
            //各ボタン要素の親要素にクラス名付与
            $('.toolbar-item .code-select-btn').parents('.toolbar-item').addClass('code-select');
        });
    </script>

</body>

</html>

明日へ続く

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2025年07月15 07:00日

タグ

```, ;;⏩, あたり, いん, オート, お伝え, お話, クラス, コード, コア, こと, コネクション, コントローラー, コンフィグフォルダ, サイト, シェア, スクリプト, その他, それら, ダーク, データ, データベース, テーブル, ドップ, ヒント, ファイル, フラグ, ブレイド, プレス, ブログデータ, ボタン, モード, モデル, もの, よう, リンク, ローダ, ワード, 付与, 作成, 使用, 処理, 出力, 切り替え, 去年, 取得, 変更, 広告, 感じ, 明日, 明記, 流石, 簡単, 表示, 要素, 言語, 記述, 設定, 選択, 随時,

映画、囚われた国家を観ました。

2021.12.02

Logging

今日は昨日より寒いですね?

さて、囚われた国家という映画を遅れながら観ましたので、足跡的な感想を残しておきます。この映画、最後の最後まで見応えがありよかったです。まさにこの言葉がぴったりな映画「切り札は先に見せるな、見せるならさらに奥の手を持て」。そして、万人受けするかどうか分からない映画です・・・。

注意事項を言えば明るい映画ではないどちらかと言えばダークで知的な映画だと思ってください。これ以上言えばネタバレになると思いますのでラストは言えないけど・・・そうですね、全然ストーリーは違いますが映画、CUBEに近い何かがこの映画にはあるような気がします。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2021年12月02 01:11日

タグ

CUBE, これ, ストーリー, ダーク, どちらか, ぴったり, ラスト, 万, 事項, 人受け, 今日, 何か, 切り札, 国家, 奥の手, 感想, 映画, 昨日, 最後, 気, 注意, 知的, 見応え, 言葉, 足跡,

継続は力なりっていう言葉と好きこそ物の上手なれが合致する人。

2021.08.20

Logging

派遣からお仕事の紹介電話がかかってくる事は有り難いことなのだけど、派遣からお仕事は何かダーク感があったりする気がしてどうも一歩前に進めないでいます。そして今の歳から数年間、派遣で働いていて派遣切りにあったときに次の職業は今よりももっと見つからないだろうなって思います。そんなでフリーランスなのか無職なのかわからない位置にいます。

さて、TAKUYAさんという人をITエンジニアなら聞いたことがある人もいると思います。自分のブログでもちらっと紹介した人です、そして自分が一方的に憧れている人でもあります。やっぱ違うなというのは動画を見ていただければわかると思いますが、殆どのコードディングを補完機能を使っていないところなんかを見ると「あぁー」只々、凄いなと思います。ここまで出来るようになるには毎日（昔）、コードを書いている（プログラミングしている）からと好きこそ物の上手なれという事につきますよね。そして継続を惜しまない人はさらに高度な技術を身につけていくのだなと感じます。

動画を見て個人開発者になりたいと感じる人も多いと思います、そして単なるラッキーで個人開発者になれたんじゃなくて努力と失敗などを繰り返して今があるだなと思います。自分もなにか秀でるぐらいの突起した技術や能力を身に着けたいと動画を見てそう思う人は少なからずいると思います。自分で頑張るしかないよね。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2021年08月20 07:10日

タグ

IT, TAKUYA, エンジニア, お仕事, コード, コードディング, ここ, こと, ダーク, とき, ところ, フリー, ブログ, プログラミング, ランス, 一, 上手, 事, 人, 今, 位置, 力, 動画, 合致, 感, 数, 昔, 機能, 次, 歳, 殆ど, 毎日, 気, 派遣, 無職, 物, 紹介, 継続, 職業, 自分, 補完, 言葉, 電話, 高,

魂の叫びのような歌を歌う人。

2017.09.09

Logging

魂の叫びのような歌を歌う人はあまりいない中のひとりにamazarashi氏がいる、歌詞は別の人が作ってたりするのだけどamazarashi氏が歌うモノには、強烈なインパクトがある。
最初は歌詞が強烈でダークだなと思ったのがYOUTUBEで聴いた印象なんです、このヒトの歌っているのは歌詞には負の要素が多いのだけど実は希望を歌っているように思えます。
こういう魂を削って歌っている人は少ないような気がします。