book扩展的单词

<?php
/*
Template Name: Book Words Page
*/

get_header(); ?>

<div class="container">
    <div class="row">
        <?php
        $words = array(
            array(
                'word' => 'Bookstore',
                'phonetic' => '[\'bʊkstɔː(r)]（英式），[\'bʊk,stɔr, -ˌstor]（美式）',
                'translation' => '书店',
                'image' => 'https://example.com/bookstore.jpg', // 请替换为实际图片URL
                'example' => 'I bought this book at a local bookstore.',
                'example_translation' => '我在当地的一家书店买了这本书。'
            ),
            // 其他单词数组结构类似，此处省略以简洁代码...
            array(
                'word' => 'Comic book',
                'phonetic' => '[\'kɒmɪk bʊk]（英式），[\'kɑmɪk bʊk]（美式）',
                'translation' => '连环画',
                'image' => 'https://example.com/comic-book.jpg', // 请替换为实际图片URL
                'example' => 'The comic book adaptation of the movie was very popular.',
                'example_translation' => '这部电影的连环画改编版非常受欢迎。'
            )
        );

        foreach ($words as $word) {
            echo '<div class="col-md-4 col-sm-6 col-xs-12 word-card">';
            echo '<img src="' . $word['image'] . '" alt="' . $word['word'] . '" class="word-image">';
            echo '<h3>' . $word['word'] . '</h3>';
            echo '<p><strong>音标:</strong> ' . $word['phonetic'] . '</p>';
            echo '<p><strong>中文翻译:</strong> ' . $word['translation'] . '</p>';
            echo '<p><strong>例句:</strong> ' . $word['example'] . '</p>';
            echo '<p><strong>例句中文:</strong> ' . $word['example_translation'] . '</p>';
            echo '</div>';
        }
        ?>
    </div>
</div>

<style>
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.word-card {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
}

.word-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .word-card {
        flex: 1 1 calc(50% - 10px);
    }
}

@media (max-width: 480px) {
    .word-card {
        flex: 1 1 100%;
    }
}
</style>

<?php get_footer(); ?>