やったこと

育心会（https://med-ikushinkai.com/）のWordpressから投稿したお知らせを各クリニックのホームページに掲載したいとのことで連携しています。
※ホームページが重くなること、アクセス数が減る可能性があること、SEO的に悪影響を及ぼす可能性があることはディレクターにお伝え済み＆顧客案内済み。

・ミューザ川崎こどもクリニック
・ミューザ川崎こどもクリニック健診センター
・糀谷こどもクリニック
・さくらキッズクリニック
・武蔵小杉森のこどもクリニック
・二子新地ひかりこどもクリニック
・新川崎ふたばクリニック小児科皮膚科
（渋谷国際皮膚科医院はうちの管理下ではないので除外）

お知らせの種類

①お知らせ
②休診
※この2種類でOKと聞いています。
増やすと全案件手入れが必要なのでこの2種類だけで良いですかと聞いて「大丈夫」と返答を貰っているのでこれ以上は増えないはずです。
※育心会側のWordpressでもカテゴリーが増やせないようにadd_admin.cssで投稿画面から追加ボタンを削除し、Menu Editorで管理者以外ではカテゴリーが増やせないようにしています。

育心会側の設定

テーマにデータ連携用のphpファイルの設置

page-inc_XXXXX_blog_all.php（お知らせ、休診両方全て表示させるデータ）
page-inc_XXXXX_blog_closed.php（お知らせだけを表示させる＋もっと見るボタンが設置してあるデータ）
page-inc_XXXXX_blog_news.php（休診だけを表示させる＋もっと見るボタンが設置してあるデータ）
page-inc_XXXXX_blog_top.php（トップぺージを表示させるデータ）
設置後、それぞれの表示フォーマットに合わせてカスタマイズします。

固定ページの作成

タイトル：「院名（トップリンク表示用）」　→　パーマリンク「inc-xxx-blog_top」
タイトル：「院名（一覧用）」　→　パーマリンク「inc-xxx-blog_all」
タイトル：「院名（お知らせ）」　→　パーマリンク「inc-xxx-blog_news」
タイトル：「院名（休診）」　→　パーマリンク「inc-xxx-blog_closed」
固定ページ作成後、テンプレートをあてて、それぞれの表示フォーマットに合わせてカスタマイズします。

各クリニック側の設定

テーマに連携したデータを引っ張って表示させるphpファイルの設置

page-news-all.php（お知らせ、休診両方全て表示させるページのテンプレート）
page-news-closed.php（休診を表示させるページのテンプレート）
page-news-info.php（お知らせを表示させるページのテンプレート）

固定ページの作成

タイトル：「一覧」　→　パーマリンク「new_all」
タイトル：「お知らせ」　→　パーマリンク「new_news」
タイトル：「休診」　→　パーマリンク「new_closed」
設置後、それぞれの表示フォーマットに合わせてカスタマイズします。

WordPressの編集

ボタン用のcssを設置

新しくcssを追加するか、既存の設置されているcssに下記の記述を追加してください。（見栄えはご自由にご設定ください）

.list-item{
    opacity: 1;
}
.list-item.is-hidden {
    opacity: 0;
    height: 0;
    margin: 0;
}
.list-btn {
    margin-top: 20px;
  position: relative;
  z-index: 9999;
}
.list-btn.is-btn-hidden{
  display:none;
}
.list-btn button {
    background-color: #e77f8d;
  color:#fff;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    height: 32px;
    line-height: 32px;
    width: 120px;
}

.list-item{

opacity: 1;

}

.list-item.is-hidden {

opacity: 0;

height: 0;

margin: 0;

}

.list-btn {

margin-top: 20px;

position: relative;

z-index: 9999;

}

.list-btn.is-btn-hidden{

display:none;

}

.list-btn button {

background-color: #e77f8d;

color:#fff;

border: none;

cursor: pointer;

outline: none;

padding: 0;

height: 32px;

line-height: 32px;

width: 120px;

}

functions.php

下記のCROS設定を入れてください。入れないと連携できません。

/**
 * CORS対策
 * Access-Control-Allow-Originヘッダの追加
 */
add_action('send_headers', 'cors_http_header');
function cors_http_header(){
    header("Access-Control-Allow-Origin: https://med-ikushinkai.com");
}

/**

* CORS対策

* Access-Control-Allow-Originヘッダの追加

add_action('send_headers', 'cors_http_header');

function cors_http_header(){

header("Access-Control-Allow-Origin: https://med-ikushinkai.com");

}

index.htmlの設定

page-inc_XXXXX_blog_top.phpで設定したデータを読み込む記述を入れます。

<script type="text/javascript">
$(function(){	
	$(".index.htmlで読み込むクラス名").load("https://med-ikushinkai.com/inc-xxxxx-blog_top/ .phpから読み込むクラス名");
});
</script>

$(function(){

$(".index.htmlで読み込むクラス名").load("https://med-ikushinkai.com/inc-xxxxx-blog_top/ .phpから読み込むクラス名");

});

</script>