Категории

• Все категории
• 2040
• CG
• IOT умный дом
• Joomla
• Linux
• Windows
• Безопасность
• железо
• Сети LAN
• Создание сайтов

Добавление тегов в админке для статей

23.07.2025 22:45 | коды из категории: Создание сайтов

Говорят, что поисковые системы любят всякие теги и ключевые слова. Метатег кейворд уже как сто лет не актуальный, а вот добавлять теги к статье и возможность сортировки по тегам поисковики вроде как еще любят

1. Создадим таблицу для тегов и связей
Вместо хранения тегов через запятую (это плохая практика!), лучше сделать нормализованную структуру:

-- Таблица тегов (хранит уникальные теги)
CREATE TABLE `tags` (
  `id` INT AUTO_INCREMENT PRIMARY KEY,
  `name` VARCHAR(50) UNIQUE NOT NULL,
  `slug` VARCHAR(50) UNIQUE NOT NULL  -- для ЧПУ (например, "modnye-stili" вместо "Модные стили")
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Связь тегов с постами (многие-ко-многим)
CREATE TABLE `article_tags` (
  `article_id` INT NOT NULL,
  `tag_id` INT NOT NULL,
  PRIMARY KEY (`article_id`, `tag_id`),
  FOREIGN KEY (`article_id`) REFERENCES `articles`(`id`) ON DELETE CASCADE,
  FOREIGN KEY (`tag_id`) REFERENCES `tags`(`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

2. Зачем это нужно?

SEO-оптимизация – поисковики любят теги (дополнительные ключевые слова).
Навигация – пользователи могут искать по тегам.
В тренде – почти все современные блоги/соцсети используют теги.

3. Как добавить теги в админке?
Допишем в форму добавления статьи поле для добавления тегов, типо add.php

<label>Теги (через запятую)<br>
  <input type="text" name="tags" placeholder="PHP, WebDev, Блог">
</label><br>

4. Обработка тегов при сохранении
В обработчике формы тоже добавить обработку (add.php):

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // ... (ваш текущий код сохранения статьи) ...
    
    // Обработка тегов
    if (!empty($_POST['tags'])) {
        $tags = explode(',', $_POST['tags']);
        $tags = array_map('trim', $tags);  // убираем пробелы
        $tags = array_filter($tags);        // удаляем пустые
        
        foreach ($tags as $tagName) {
            // Ищем или создаём тег
            $stmt = $pdo->prepare("INSERT IGNORE INTO `tags` (`name`, `slug`) VALUES (?, ?)");
            $slug = strtolower(preg_replace('/[^a-zа-я0-9]+/ui', '-', $tagName));
            $stmt->execute([$tagName, $slug]);
            
            // Получаем ID тега
            $tagId = $pdo->lastInsertId() ?: $pdo->query("SELECT `id` FROM `tags` WHERE `name` = " . $pdo->quote($tagName))->fetchColumn();
            
            // Связываем с статьёй
            $pdo->prepare("INSERT IGNORE INTO `article_tags` (`article_id`, `tag_id`) VALUES (?, ?)")
                ->execute([$articleId, $tagId]);
        }
    }
}

5. Вывод тегов в блоге

// Получаем теги статьи
$tags = $pdo->query("
    SELECT t.* FROM `tags` t
    JOIN `article_tags` at ON t.id = at.tag_id
    WHERE at.article_id = " . (int)$_GET['id']
)->fetchAll();

// Выводим
if (!empty($tags)) {
    echo '<div class="tags">';
    foreach ($tags as $tag) {
        echo '<a href="/tag/' . htmlspecialchars($tag['slug']) . '" class="tag">#' . htmlspecialchars($tag['name']) . '</a> ';
    }
    echo '</div>';
}

6. CSS для красивого отображения

.tags {
    margin: 15px 0;
}
.tag {
    display: inline-block;
    background: #4a4a4a;
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    margin-right: 5px;
    text-decoration: none;
    font-size: 14px;
}
.tag:hover {
    background: #3a3a3a;
}

1. Создаем файл tag.php
Помести его в корень блога (tag.php):

<?php
require __DIR__ . '/includes/db.php';
require __DIR__ . '/includes/header.php';

// Получаем slug тега из URL
$tagSlug = $_GET['slug'] ?? '';
if (empty($tagSlug)) {
    die("Тег не указан!");
}

// Находим тег и связанные статьи
$tag = $pdo->prepare("SELECT name FROM tags WHERE slug = ?");
$tag->execute([$tagSlug]);
$tag = $tag->fetch();

if (!$tag) {
    die("Тег не найден!");
}

// Получаем статьи с этим тегом
$articles = $pdo->prepare("
    SELECT a.* FROM articles a
    JOIN article_tags at ON a.id = at.article_id
    JOIN tags t ON at.tag_id = t.id
    WHERE t.slug = ?
    ORDER BY a.created_at DESC
");
$articles->execute([$tagSlug]);
?>

<h1>Статьи с тегом #<?= htmlspecialchars($tag['name']) ?></h1>

<div class="articles-list">
    <?php foreach ($articles as $article): ?>
        <div class="article">
            <h2><?= htmlspecialchars($article['title']) ?></h2>
            <p><?= nl2br(htmlspecialchars($article['preview_text'])) ?></p>
            <a href="/article.php?id=<?= $article['id'] ?>">Читать далее</a>
        </div>
    <?php endforeach; ?>
</div>

<style>
.articles-list { margin-top: 20px; }
.article {
    background: #2d2d2d;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}
.article a { color: #4CAF50; }
</style>

<?php include __DIR__ . '/includes/footer.php'; ?>

немного улучшений. добавление автозаполнения с проверкой уже готовых тегов из базы данных. сначала создадим файлы /api/get_tags.php

<?php
header('Content-Type: application/json');
require_once '../../includes/db.php';

$term = $_GET['term'] ?? '';

$stmt = $pdo->prepare("SELECT name FROM tags WHERE name LIKE ? LIMIT 10");
$stmt->execute(["%$term%"]);
$tags = $stmt->fetchAll(PDO::FETCH_COLUMN);

echo json_encode($tags);

/adminka/tag-autocomplete.js

$(function() {
  $('#tag-input').autocomplete({
    source: '/api/get_tags.php',
    minLength: 2,
    select: function(event, ui) {
      // Добавляем тег в основное поле тегов
      var currentTags = $('input[name="tags"]').val();
      $('input[name="tags"]').val(
        currentTags ? currentTags + ', ' + ui.item.value : ui.item.value
      );
      $(this).val('');
      return false;
    }
  });
});

add.php или файл в админке где добавлять статьи

<!-- Сначала jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Затем jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<!-- И только потом ваш скрипт -->
<script src="tag-autocomplete.js"></script>

← Назад к списку

---