AstroTK
Community

wordpressサイトのものをAstro.jsにする

#Community

wordpressサイトのものをAstro.jsにする

前提

  1. phpファイル、画像・css、jsファイルなどastroプロジェクトに移管
  2. WordPress REST APIを使って、データを取得動的表示させる
  3. 画像をAstroのImageタグを使って表示させる

phpファイル、画像・css、jsファイルなどastroプロジェクトに移管

Astro.jsは、通常のHTMLで書けるのでwordpress等のphpファイル（ほぼhtmlなので）で書いた内容も問題なく使うことができます。ただ、動的箇所やURLなどphpで書かれている部分は、移行に伴って変更・削除する必要があります。

例

<a href="<?php echo home_url("/"); ?>" class="">HOME</a>
↓
<a href="/" class="">HOME</a>

<img src="<?php bloginfo('template_directory'); ?>/images/example.png">
↓
<img src="/images/example.png">

投稿ループなども削除して、動的箇所は静的に値を追加するなどで、一旦表示が出来るようにする。
<?php
$the_query = new WP_Query($args);
if ($the_query->have_posts()) :
  while ($the_query->have_posts()) :
    $the_query->the_post();
?>
<div><?php the_title(); ?><div>
<?php
  endwhile;
  wp_reset_postdata();
endif;
?>

画像やcssはsrcフォルダに追加します。
publicにも入れて使用することはできますが、後程説明部分で、画像のインポートなど挟むので基本的にはsrcフォルダに入れて使用することが良いです。

WordPress REST APIを使って、データを取得動的表示させる

WordPressサイトには標準でAPIが用意されており、データを取得することができます。
投稿の情報を取得するエンドポイントは /wp-json/wp/v2/posts

動的表示させたいファイル上部に以下に追加
フェッチでデータを取得

---
const res = await fetch("http://yoursite.com/wp/v2/posts")
const posts = await res.json()
---
表示の際reactで書く
        {
        posts.map((post, index) => (
            {post.title}
        ))
        }

画像をAstroのImageタグを使って表示させる

通常(wordpress時の画像)
画像
↓

---
import picture from '@images/picture.png'
---

<Image src={picture} alt="画像" class="example"/>

インポートして、Imageタグを使って表示させる
インポートが挟むようになりますが、以下メリットがあるので是非使った方良いと思います。
メリット
・width,heightの値が自動的に追加される
・png等もwebpで表示される

← Back to Blog