اتصال دو سایت وردپرس برای نمایش مقالات (راهنمای گام‌به‌گام)

آیدین حسینیآخرین بروزرسانی: 13 خرداد, 1404

0 زمان تقریبی مطالعه 4 دقیقه

آیا تا کنون از خود پرسیده اید که چطور می توانید محتوای یک سایت را در سایت وردپرسی دیگر نمایش دهید؟

مثلا وقتی شما وارد صفحه اول سایت وب آیدین می شود اگر کسی به پایین اسکرول کنید بخشی به نام “آخرین مقالات پایگاه دانش وب آیدین” وجود دارد که اطلاعات آن از پایگاه دانش وب آیدین به آدرس webaidin.com/blog به صورت پویا نمایش داده می شود و اگر در وبلاگ وب آیدین محتوای جدیدی تولید شود این بخش نیز بروز خواهد شد.

ممکن است این قابلیت در هاست های لوکیشن به درستی عمل نکند.

در بسیاری از پروژه‌های وردپرسی ممکن است نیاز داشته باشید محتوای سایت دیگری را که معمولاً زیرمجموعه یا وبلاگ سایت اصلی است به‌صورت پویا در سایت فعلی نمایش دهید. به‌عنوان مثال نمایش آخرین مقالات بلاگ webaidin.com/blog/ در صفحه اصلی سایت webaidin.com. ساده‌ترین و بهینه‌ترین راه برای این کار استفاده از REST API وردپرس است.

موضوعاتی که در این مقاله به آنها پرداخته خواهد شد، به شرح ذیل است:

چطور باید محتوای یک سایت را به صورت داینامیک در سایت دیگر نمایش دهید؟

وردپرس به‌طور پیش‌فرض یک API قدرتمند در اختیار شما قرار می‌دهد که با استفاده از آن می‌توانید اطلاعات پست‌ها، دسته‌ها، برچسب‌ها و سایر داده‌ها را از سایت دیگر فراخوانی کنید. کافی است آدرسhttps://domain.com/wp-json/wp/v2/posts/ را در کد PHP یا جاوااسکریپت سایت مبدا فراخوانی کرده و اطلاعات را در قالب دلخواه نمایش دهید. این روش نه‌تنها نیاز به افزونه ندارد بلکه به‌صورت کاملاً پویا آخرین تغییرات را نیز نمایش می‌دهد.

با کمی دانش کدنویسی می‌توانید تصویر شاخص، عنوان، خلاصه مطلب و حتی لینک محتوا را برای هر پست طراحی کرده و در سایت خود نمایش دهید. این راهکار برای سایت‌هایی با ساختار چند‌دامنه‌ای یا بلاگ جداگانه بسیار کاربردی، امن و پرسرعت است.

برای انجام این کار کد زیر را در فایل Functions.php قالب سایتی که می خوهید محتوا در آن نمایش داده شود یا هر افزونه وردپرسی دیگر که قابلیت اجرای php دارد درون ریزی کنید.

توجه داشته باشید که در خط 2 باید آدرس سایت خود را جاگذین کنید، همچنین ما یک فیلتر اعمال کردیم که 4 پس آخر را بر می گرداند شما می توانید ?per_page=4&_embed را از انتها حذف کنید.
همچنین در خط 37 می توانید مقدار Font-family را با فونت نصب شده در سایت خود جایگذین کنید.

میزبانی امن و پایدار را با هاست وردپرس وب آیدین تجربه کنید!

هاست وردپرس وب آیدین، یکی از بهترین گزینه‌ها برای سرویس دهی به وب‌سایت‌های وردپرسی است. با استفاده از هاست وردپرس وب آیدین می‌توانید از امکانات پیشرفته، پشتیبانی ۲۴ ساعته، امنیت بالا و سرعت عالی سایت وردپرسی بهره‌مند شوید. همچنین، تمامی هاست های وب آیدین دارای ترافیک نامحدود بوده و با استفاده از این سرویس ها خیالتان از بابت ارتقا پنل نیز راحت خواهد بود. برای کسب اطلاعات بیشتر یا خرید هاست وردپرس به صفحه زیر مراجعه کنید.

خرید هاست وردپرس

کد نمایش محتوای وبلاگ وردپرسی در یک سایت وردپرسی دیگر

ابتدا باید کد زیر را در فایل Functions.php قالب سایت و یا هر افزونه ای که توانایی اجرای php را داشته باشد وارد کنید.

function show_blog_latest_posts_clean() {

$response = wp_remote_get('https://webaidin.com/blog/wp-json/wp/v2/posts?per_page=4&_embed');

if (is_array($response) && !is_wp_error($response)) {

$posts = json_decode(wp_remote_retrieve_body($response));

$output = '<div class="webaidin-latest-posts">';

foreach ($posts as $post) {

$thumbnail = isset($post->_embedded->{'wp:featuredmedia'}[0]->source_url)

? $post->_embedded->{'wp:featuredmedia'}[0]->source_url

: '';

$title = esc_html($post->title->rendered);

$excerpt = wp_trim_words(wp_strip_all_tags($post->content->rendered), 30, '...');

$link = esc_url($post->link);

$output .= '<div class="webaidin-post">';

if ($thumbnail) {

$output .= '<img class="webaidin-thumb" src="' . esc_url($thumbnail) . '" alt="' . esc_attr($title) . '">';

}

$output .= '<div class="webaidin-content">';

$output .= '<h3>' . $title . '</h3>';

$output .= '<p>' . $excerpt . '</p>';

$output .= '<a class="webaidin-btn" href="' . $link . '" target="_blank">مشاهده کامل</a>';

$output .= '</div></div>';

}

$output .= '</div>';

// استایل

$output .= '<style>

.webaidin-latest-posts {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 24px;

margin-top: 30px;

font-family: IRANYekanXFaNum, sans-serif;

}

.webaidin-post {

display: flex;

flex-direction: column;

justify-content: space-between;

background: #fff;

border: 1px solid #eee;

border-radius: 12px;

overflow: hidden;

box-shadow: 0 4px 8px rgba(0,0,0,0.05);

transition: all 0.3s ease;

}

.webaidin-post:hover {

transform: translateY(-5px);

box-shadow: 0 8px 16px rgba(0,0,0,0.1);

}

.webaidin-thumb {

width: 100%;

height: 180px;

object-fit: cover;

}

.webaidin-content {

padding: 16px;

display: flex;

flex-direction: column;

flex-grow: 1;

}

.webaidin-content h3 {

font-size: 17px;

color: #333;

margin-bottom: 10px;

line-height: 1.4;

}

.webaidin-content p {

font-size: 14px;

color: #666;

line-height: 1.7;

flex-grow: 1;

text-align: justify;

}

.webaidin-btn {

margin-top: 15px;

align-self: anchor-center;

background-color: #003755;

color: #fff !important;

padding: 8px 14px;

font-size: 14px;

border-radius: 6px;

text-decoration: none;

transition: background 0.3s ease;

}

.webaidin-btn:hover {

background-color: #001f31;

}

</style>';

return $output;

}

return '<p>خطا در دریافت پست‌ها از وبلاگ.</p>';

}

add_shortcode('latest_blog_posts', 'show_blog_latest_posts_clean');

شورت کد نمایش محتوا در بخش مد نظر

پس از وارد کردن کد بالا در فایل Functions.php سایت مقصد حالا فقط کافی است در هر محلی که می خواهید محتوا نمایش داده شود شورت کد زیر را وارد کنید تا محتوایات فراخوانده شده نمایش داده شود.

1	[latest_blog_posts]

شورت کد بالا را می توانید در المنتور و یا هر جایی از کد های بخش مربوطه وارد کنید تا نمایش داده شود.

REST API در وردپرس چیست؟

به صورت خلاصه REST API وردپرس یک رابط برنامه‌نویسی است که به توسعه‌دهندگان اجازه می‌دهد با استفاده از درخواست‌های HTTP و فرمت JSON با وردپرس تعامل داشته باشند. این API از نسخه 4.7 به هسته وردپرس اضافه شده و امکان خواندن، ایجاد، به‌روزرسانی و حذف محتوا را بدون نیاز به بارگذاری صفحات وردپرس فراهم می‌کند.

چرا REST API در وردپرس اهمیت دارد؟

توسعه اپلیکیشن‌های SPA: با استفاده از REST API می‌توان اپلیکیشن‌های تک‌صفحه‌ای (Single Page Applications) با فریم‌ورک‌هایی مانند React یا Vue.js ایجاد کرد.
وردپرس Headless: جدا کردن بخش مدیریت محتوا (Backend) از رابط کاربری (Frontend) و استفاده از وردپرس به‌عنوان یک CMS بدون وابستگی به قالب‌های سنتی.
افزایش انعطاف‌پذیری: امکان توسعه اپلیکیشن‌های موبایل، دسکتاپ یا وب با استفاده از زبان‌های مختلف برنامه‌نویسی.
ارتباط با سرویس‌های خارجی: ادغام وردپرس با سرویس‌هایی مانند CRM، ابزارهای بازاریابی یا پلتفرم‌های تجارت الکترونیک.

مفاهیم کلیدی در REST API وردپرس

Endpoint (نقطه پایانی): آدرس‌هایی که برای دسترسی به منابع مختلف وردپرس استفاده می‌شوند، مانند /wp-json/wp/v2/posts برای دریافت پست‌ها.
HTTP Methods (متدهای HTTP): شامل GETبرای خواندن، POSTبرای ایجاد، PUTبرای به‌روزرسانی و DELETEبرای حذف منابع.
Authentication (احراز هویت): برای انجام عملیات‌های حساس نیاز به احراز هویت دارید. روش‌هایی مانند Application Passwords، Basic Auth و JWT در دسترس هستند.
Custom Endpoints (نقاط پایانی سفارشی): امکان ایجاد نقاط پایانی خاص برای نیازهای ویژه، مانند دریافت نظرات مشتریان یا داده‌های سفارشی.

آیا می دانستید افزونه ویرایشگر Gutenberg برای تعامل با پایگاه داده از REST API استفاده می کند.

چگونه REST API را در وردپرس غیرفعال کنیم؟

اگر نمی‌خواهید داده‌های سایت شما از طریق REST API در دسترس باشند، می‌توانید آن را غیرفعال کنید:

استفاده از افزونه: افزونه‌هایی مانند “Disable WP REST API” را نصب کنید.
کد سفارشی: افزودن کد زیر به فایل functions.php قالب یا ایجاد یک افزونه سفارشی:

1 2	add_filter( 'json_enabled', '__return_false' ); add_filter( 'json_jsonp_enabled', '__return_false' );

توجه داشته باشید که غیرفعال کردن REST API ممکن است بر عملکرد برخی افزونه‌ها یا بخش‌های مدیریتی وردپرس تأثیر بگذارد.

جمع بندی

امیدواریم این مقاله نیز مانند دیگر مقاله های پایگاه دانش وب آیدین مورد توجه شما قرار گرفته باشد و توانسته باشید محتوای یکی از سایت های خود را در یک سایت دیگر نمایش دهید، در صورت هر گونه مشکل در کد ها می توانید از بخش نظرات اعلام کنید تا توسط ما بررسی شود.

برچسب ها