https://www.roman-kan.jp/assets/new_script.js

1// 投稿データを取得
2// script.jsと同じカスタムエンドポイントを参照
3fetch("https://roman-kan.jp/wp-romankan/wp-json/wp/v2/get-post-relation?perpage=30")
4  .then(function(response) {
5    return response.json();
6  })
7  .then(function(data) {
8    var posts = data.posts; // 投稿の配列を抽出
9
10    // 1. 表示したい投稿IDと、最終的に表示したい目標件数を定義します。
11    var offerPostIds = [18299, 18257, 18206, 18228];
12    var targetCount = 4; // 常に4件表示させる
13
14    // 2. 指定されたIDの投稿を取得し、見つからないもの(undefined)を除外します。
15    var matchedPosts = offerPostIds.map(function(id) {
16      return posts.find(function(post) {
17        return post.id === id;
18      });
19    }).filter(Boolean);
20
21    // 3. もし見つかった記事が4件に満たない場合、最新記事で穴埋めします。
22    if (matchedPosts.length < targetCount) {
23      var shortage = targetCount - matchedPosts.length; // 足りない件数を計算（今回は1件足りない）
24
25      // 取得した全記事(30件)の中から、指定ID「以外」の記事だけを抽出します
26      var latestOtherPosts = posts.filter(function(post) {
27        return offerPostIds.indexOf(post.id) === -1;
28      });
29
30      // 足りない件数分だけ、最新記事を切り取ります
31      var fillerPosts = latestOtherPosts.slice(0, shortage);
32
33      // 見つかった記事のうしろに、穴埋め用の最新記事を合体させます
34      matchedPosts = matchedPosts.concat(fillerPosts);
35    }
36
37    // 4. 完成した4件のリストを各セクションに割り当てます
38    var postsForOffer = matchedPosts;
39    var postsForOffer2 = matchedPosts;
40    var postsForOffer3 = matchedPosts;
41
42    // お知らせ用の投稿を取得（ここは変更なし）
43    var categoriesForNewsSlugs = ["info", "media", "recruit"];
44    var postsForNews = posts.filter(function(post) {
45      return post.category && typeof post.category.slug === 'string' && categoriesForNewsSlugs.indexOf(post.category.slug) !== -1;
46    }).slice(0, 4);
47
48    // 5. 表示処理を実行
49    displayPosts(postsForOffer, "top-section", "オファー", "お得な宿泊プランとイベント情報", "event,plan");
50    displayPosts(postsForOffer2, "top-section-2", "お得な宿泊プランとイベント情報", "", "event,plan");
51    displayPosts(postsForOffer3, "top-section-3", "旬のおすすめ", "", "event,plan,special");
52    displayPosts(postsForNews, "bottom-section", "お知らせ", "ホテルからのお知らせ", "info,media,recruit");
53  })
54  .catch(function(error) {
55    console.error("投稿の取得に失敗しました:", error);
56  });
57
58// 投稿表示関数
59function displayPosts(posts, sectionId, titleEn, titleJp, moreCategories) {
60  var section = document.getElementById(sectionId);
61  if (!section) return;
62
63  // セクションのタイトルと「More」リンク
64  section.innerHTML =
65    '<h2 class="p-home__title c-title only-mobile">' +
66    '<span class="c-title__inner">' + titleEn + '<span class="c-title__sub">' + titleJp + '</span></span>' +
67    '</h2>' +
68    '<div class="section-inner">' +
69    '<div class="section-header">' +
70    '<div class="item-content only-pc">' +
71    '<h3 class="item-title">' + titleEn + '</h3>' +
72    '<p class="item-highlight">' + titleJp + '</p>' +
73    '</div>' +
74    '<div class="btn-more-1 only-pc button-wrapper">' +
75    '<a class="button-outline" role="button" href="https://www.roman-kan.jp/news/?offset=0&category=' + moreCategories + '" aria-pressed="true" rel="noopener">' +
76    '<div class="button-caption"><span class="button-text">詳しく見る</span></div>' +
77    '</a>' +
78    '</div>' +
79    '</div>' +
80    '<div id="' + sectionId + '-posts" class="posts-container"></div>' +
81    '<div class="btn-more-2 only-mobile button-wrapper">' +
82    '<a class="button-outline" role="button" href="https://www.roman-kan.jp/news/?offset=0&category=' + moreCategories + '" aria-pressed="true" rel="noopener">' +
83    '<div class="button-caption"><span class="button-text">詳しく見る</span></div>' +
84    '</a>' +
85    '</div>' +
86    '</div>';
87
88  var postsContainer = document.getElementById(sectionId + "-posts");
89

90  posts.forEach(function(post) {
91    // 【修正箇所】データが空の場合はスキップしてエラーを防ぐ
92    if (!post) return;
93
94//    var postLink = "https://www.roman-kan.jp/news/post/?p=" + post.id;
95	// outerlinkがあればそれを使い、なければ標準のリンクを作る
96	var postLink = post.outerlink ? post.outerlink : ("https://www.roman-kan.jp/news/post/?p=" + post.id);
97
98    // 画像URLの取得: post.tmbを直接使用
99    var thumbnailUrl = post.tmb || 'https://www.roman-kan.jp/wp-romankan/wp-content/uploads/2021/03/logo_romankan-1.png';
100
101    // サムネイルURLから '-幅x高さ' の部分を削除
102    // 例: "xxxx-300x300.jpeg" を "xxxx.jpeg" に変換
103    var highQualityThumbnailUrl = thumbnailUrl.replace(/-\d+x\d+\.(jpeg|jpg|png|gif|webp)$/i, '.$1');
104
105    // カテゴリに応じたクラス名と名前を取得
106    var categoryName = (post.category && post.category.name) ? post.category.name : "";
107    var categoryClass = categoryName ? ("category-" + (post.category && post.category.slug ? post.category.slug : "")) : "";
108
109    // 日付の取得とフォーマット
110    // "YYYY年MM月DD日"形式から年、月、日を抽出
111    var dateMatch = post.date.match(/(\d+)年(\d+)月(\d+)日/);
112    var year = dateMatch ? parseInt(dateMatch[1], 10) : null;
113    var month = dateMatch ? parseInt(dateMatch[2], 10) : null;
114    var day = dateMatch ? parseInt(dateMatch[3], 10) : null;
115
116    var formattedDate = "";
117    if (year !== null && month !== null && day !== null) {
118      // Dateオブジェクトの月は0から始まるため、month - 1 とする
119      var postDateObject = new Date(year, month - 1, day);
120      formattedDate = postDateObject.getFullYear() + "/" + (postDateObject.getMonth() + 1) + "/" + postDateObject.getDate();
121    } else {
122      // 日付のパースに失敗した場合のフォールバック
123      formattedDate = post.date; // 元の文字列を表示するか、空にするかなど
124    }
125
126    var postElement = document.createElement("a");
127    postElement.href = postLink;
128    postElement.innerHTML =
129      '<img src="' + highQualityThumbnailUrl + '" alt="' + (post.title || '') + '">' +
130      '<p class="post-date">' + formattedDate + '</p>' +
131      '<ul class="' + categoryClass + '"><li>' + categoryName + '</li></ul>' +
132      '<h3>' + (post.title || '') + '</h3>';
133    postsContainer.appendChild(postElement);
134  });
135}