A-Z Wordpress Fihrist Nasıl Oluşturabilirim?

function az_fihrist_shortcode() {
    // Harfleri tanımla
    $harfler = ['A', 'B', 'C', 'Ç', 'D', 'E', 'F', 'G', 'H', 'I', 'İ', 'J', 'K', 'L', 'M', 'N', 'O', 'Ö', 'P', 'R', 'S', 'Ş', 'T', 'U', 'Ü', 'V', 'Y', 'Z'];

    // Çıktıyı başlat
    $output = '<div class="az-fihrist">';
    
    foreach ($harfler as $harf) {
        $output .= '<a href="' . site_url('/category/' . strtolower($harf)) . '" class="fihrist-link">' . $harf . '</a> ';
    }
    
    $output .= '</div>';

    // CSS Kodları
    $output .= '<style>
        .az-fihrist {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin: 20px 0;
        }
        .az-fihrist .fihrist-link {
            display: inline-block;
            padding: 5px 10px;
            border: 1px solid #ccc;
            text-decoration: none;
            color: #333;
            font-size: 14px;
            border-radius: 4px;
            transition: background-color 0.2s ease-in-out;
        }
        .az-fihrist .fihrist-link:hover {
            background-color: #f0f0f0;
        }
    </style>';

    return $output;
}
add_shortcode('az_fihrist', 'az_fihrist_shortcode');

function az_fihrist_shortcode() {
    // Harfleri tanımla
    $harfler = ['A', 'B', 'C', 'Ç', 'D', 'E', 'F', 'G', 'H', 'I', 'İ', 'J', 'K', 'L', 'M', 'N', 'O', 'Ö', 'P', 'R', 'S', 'Ş', 'T', 'U', 'Ü', 'V', 'Y', 'Z'];

    // Çıktıyı başlat
    $output = '<div class="az-fihrist">';
    
    foreach ($harfler as $harf) {
        $output .= '<a href="' . site_url('/category/' . strtolower($harf)) . '" class="fihrist-link">' . $harf . '</a> ';
    }
    
    $output .= '</div>';

    // CSS Kodları
    $output .= '<style>
        .az-fihrist {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin: 20px 0;
        }
        .az-fihrist .fihrist-link {
            display: inline-block;
            padding: 5px 10px;
            border: 1px solid #ccc;
            text-decoration: none;
            color: #333;
            font-size: 14px;
            border-radius: 4px;
            transition: background-color 0.2s ease-in-out;
        }
        .az-fihrist .fihrist-link:hover {
            background-color: #f0f0f0;
        }
    </style>';

    return $output;
}
add_shortcode('az_fihrist', 'az_fihrist_shortcode');

<div class="az-index">
<h2>A-Z Rüya Tabirleri</h2>
<ul>
<li><a href="/ruya-tabirleri/a">A</a></li>
<li><a href="/ruya-tabirleri/b">B</a></li>
<li><a href="/ruya-tabirleri/c">C</a></li>
<li><a href="/ruya-tabirleri/c-2">Ç</a></li>
<li><a href="/ruya-tabirleri/d">D</a></li>
<li><a href="/ruya-tabirleri/e">E</a></li>
<li><a href="/ruya-tabirleri/f">F</a></li>
<li><a href="/ruya-tabirleri/g">G</a></li>
<li><a href="/ruya-tabirleri/h">H</a></li>
<li><a href="/ruya-tabirleri/i">I</a></li>
<li><a href="/ruya-tabirleri/i-2">İ</a></li>
<li><a href="/ruya-tabirleri/j">J</a></li>
<li><a href="/ruya-tabirleri/k">K</a></li>
<li><a href="/ruya-tabirleri/l">L</a></li>
<li><a href="/ruya-tabirleri/m">M</a></li>
<li><a href="/ruya-tabirleri/n">N</a></li>
<li><a href="/ruya-tabirleri/o">O</a></li>
<li><a href="/ruya-tabirleri/o-2">Ö</a></li>
<li><a href="/ruya-tabirleri/p">P</a></li>
<li><a href="/ruya-tabirleri/r">R</a></li>
<li><a href="/ruya-tabirleri/s">S</a></li>
<li><a href="/ruya-tabirleri/s-2">Ş</a></li>
<li><a href="/ruya-tabirleri/t">T</a></li>
<li><a href="/ruya-tabirleri/u">U</a></li>
<li><a href="/ruya-tabirleri/u-2">Ü</a></li>
<li><a href="/ruya-tabirleri/v">V</a></li>
<li><a href="/ruya-tabirleri/y">Y</a></li>
<li><a href="/ruya-tabirleri/z">Z</a></li>
</ul>
</div>

.az-index ul {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: center;
}
.az-index li {
background: #f4f4f4;
padding: 10px 15px;
border-radius: 5px;
}
.az-index a {
text-decoration: none;
color: #0073aa;
font-weight: bold;
transition: color 0.3s ease;
}
.az-index a:hover,
.az-index a:focus {
color: #005177;
outline: none;
}
@media (max-width: 768px) {
.az-index ul {
justify-content: center;
}
}