Как создать горизонтальный информер для отображения курсов валют на сайте?

Привет! Создание горизонтального информера для отображения курсов валют на WordPress можно реализовать несколькими способами. Я предложу достаточно простой подход с использованием HTML, CSS и JavaScript.

### Шаг 1: Получите данные о курсах валют

Сначала вам нужно выбрать API, который будет предоставлять актуальные курсы валют. Например, вы можете использовать [Open Exchange Rates](https://openexchangerates.org/), [ExchangeRate-API](https://www.exchangerate-api.com/) или другое решение. 

### Шаг 2: Создайте HTML-код

Вам нужно добавить HTML-код для информера курс валют в файл вашей темы (например, в `header.php`) или в виджет, если это возможно.

```html
<div id="currency-ticker" style="background-color: #f9f9f9; padding: 10px; text-align: center; font-size: 16px;">
    <span id="usd-rate">USD: loading...</span>
    <span id="eur-rate">EUR: loading...</span>
    <span id="gbp-rate">GBP: loading...</span>
</div>
```

### Шаг 3: Добавьте CSS для стилизации

Вы можете добавить стиль для вашего информера в файл стилей вашей темы (`style.css`):

```css
#currency-ticker {
    display: flex;
    justify-content: center;
    gap: 20px; /* расстояние между валютами */
    border-bottom: 1px solid #ccc; /* тонкая линия снизу */
}
```

### Шаг 4: Добавьте JavaScript для получения курсов валют

Теперь добавьте JavaScript код, который будет запрашивать курс валют с API и обновлять ссылки на вашем сайте. Вставьте его в `footer.php` или в отдельный файл `.js` (например, `currency.js`), который вы подключите в `functions.php` вашей темы.

```html
<script>
    async function fetchCurrencyRates() {
        const url = 'https://your.api.endpoint'; // Замените на URL вашего API
        const response = await fetch(url);
        const data = await response.json();

        // Пример того, как можно получить курсы из ответа
        document.getElementById("usd-rate").textContent = `USD: ${data.rates.USD.toFixed(2)}`;
        document.getElementById("eur-rate").textContent = `EUR: ${data.rates.EUR.toFixed(2)}`;
        document.getElementById("gbp-rate").textContent = `GBP: ${data.rates.GBP.toFixed(2)}`;
    }

    document.addEventListener('DOMContentLoaded', fetchCurrencyRates);
</script>
```

### Шаг 5: Подключите JavaScript в `functions.php`

Если вы создали `currency.js`, добавьте этот код в файл `functions.php` вашей темы:

```php
function enqueue_custom_scripts() {
    wp_enqueue_script('currency-script', get_template_directory_uri() . '/js/currency.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');
```

### Заключение

После того как вы выполните все вышеуказанные шаги, у вас будет горизонтальный информер курсов валют, который будет отображаться на вашем сайте. Вы можете настроить стили, API и количество отображаемых валют по своему усмотрению. Если у вас возникнут трудности, не стесняйтесь задавать вопросы!