コネクション | 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日

タグ

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

DockerとMysql

2024.03.07

Logging

おはようございます、Dockerデスクトップのコンテナが別れている時、他のコンテナからMysqlサーバーに繋ぎたいという事がありますよね。その繋ぎ方を自分は勘違いしていたので記事として残しときます。Dockerを使いだして一年目で気づく間違いです（泣）。外部コンテナのMysqlサーバーに繋ぎたい場合、下記の画像のようにmysqldbに繋がないとコネクションが出来ません。自分はMYSQL_HOSTだと思っていたのですがどうも違うようです。