@Blog
日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。
小 中 大
■ ■ ■ ■ ■ ■ ■
ワードプレスのテーブルwp_postsデータを取ってきてLaravelで表示.
おはようございます.ワードプレスのテーブル（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
タグ
```, ;;⏩, あたり, いん, オート, お伝え, お話, クラス, コード, コア, こと, コネクション, コントローラー, コンフィグフォルダ, サイト, シェア, スクリプト, その他, それら, ダーク, データ, データベース, テーブル, ドップ, ヒント, ファイル, フラグ, ブレイド, プレス, ブログデータ, ボタン, モード, モデル, もの, よう, リンク, ローダ, ワード, 付与, 作成, 使用, 処理, 出力, 切り替え, 去年, 取得, 変更, 広告, 感じ, 明日, 明記, 流石, 簡単, 表示, 要素, 言語, 記述, 設定, 選択, 随時,