mrt

Kod:Tümünü seçKopyala

bir wordpress uygulaması yapalım. bu uygulama admin sayfasında media dosyalarını ufak ön izlemesi ile listelesin. dosya adını ve dosyanın boyutunu göstersin. ufak ön izlemesine tıklayınca aynı pencerede popup gerçek görüntüsünü göstersin. kullanıcı her sayfada kaç adet görüntüleneceğini seçebilsin 5-10-20-50-100 gibi. ayrıca boyuta göre sıralama yapabilsin. azalan yada artan şeklinde

dosya yapısı

------------------------------------------------------------------------------------------------------------------------

Kod:Tümünü seçKopyala

wp-content/plugins/custom-media-library/
├── custom-media-library.php
├── css/
│   └── admin.css
└── js/
    └── admin.js

------------------------------------------------------------------------------------------------------------------------

Kod:Tümünü seçKopyala

custom-media-library.php

Kod:Tümünü seçKopyala

<?php
/*
Plugin Name: Gelişmiş Medya Yöneticisi
Description: Medya kütüphanesine önizleme, sıralama ve filtreleme özellikleri ekler.
Version: 1.0
Author: Sizin Adınız
Text Domain: gelismis-medya-yoneticisi
*/

defined('ABSPATH') || die('Doğrudan erişim engellendi!');

// Aktivasyon hook'u
register_activation_hook(__FILE__, 'gmy_activate');

function gmy_activate() {
    $attachments = get_posts([
        'post_type'      => 'attachment',
        'posts_per_page' => -1,
        'post_status'    => 'inherit',
    ]);

    foreach ($attachments as $attachment) {
        gmy_save_filesize($attachment->ID);
    }
}

// Dosya boyutunu meta veri olarak kaydet
add_filter('wp_generate_attachment_metadata', 'gmy_save_filesize_meta', 10, 2);

function gmy_save_filesize_meta($metadata, $attachment_id) {
    gmy_save_filesize($attachment_id);
    return $metadata;
}

function gmy_save_filesize($attachment_id) {
    $file_path = get_attached_file($attachment_id);
    
    if (file_exists($file_path)) {
        $file_size = filesize($file_path);
        update_post_meta($attachment_id, '_gmy_filesize', $file_size);
    }
}

// Admin stil ve scriptleri
add_action('admin_enqueue_scripts', 'gmy_admin_assets');

function gmy_admin_assets($hook) {
    if ('upload.php' !== $hook) return;

    wp_enqueue_style(
        'gmy-admin-css', 
        plugins_url('css/admin.css', __FILE__),
        [],
        filemtime(plugin_dir_path(__FILE__) . 'css/admin.css')
    );

    wp_enqueue_script(
        'gmy-admin-js', 
        plugins_url('js/admin.js', __FILE__), 
        ['jquery'], 
        filemtime(plugin_dir_path(__FILE__) . 'js/admin.js'), 
        true
    );
}

// Medya sütunlarını özelleştir
add_filter('manage_media_columns', 'gmy_media_columns');
add_action('manage_media_custom_column', 'gmy_media_custom_columns', 10, 2);

function gmy_media_columns($columns) {
    unset($columns['icon']);
    $columns['thumbnail'] = __('Ön İzleme', 'gelismis-medya-yoneticisi');
    $columns['filesize'] = __('Dosya Boyutu', 'gelismis-medya-yoneticisi');
    return $columns;
}

function gmy_media_custom_columns($column_name, $post_id) {
    if ($column_name === 'thumbnail') {
        $url = wp_get_attachment_url($post_id);
        $thumb = wp_get_attachment_image($post_id, 'thumbnail', true);
        echo '<a href="'.esc_url($url).'" class="gmy-preview">'.$thumb.'</a>';
    } elseif ($column_name === 'filesize') {
        $size = get_post_meta($post_id, '_gmy_filesize', true);
        echo $size ? size_format($size, 2) : 'N/A';
    }
}

// Sıralama özelliği
add_filter('manage_upload_sortable_columns', 'gmy_sortable_columns');
add_action('pre_get_posts', 'gmy_sort_filesize');

function gmy_sortable_columns($columns) {
    $columns['filesize'] = 'filesize';
    return $columns;
}

function gmy_sort_filesize($query) {
    if (!is_admin() || !$query->is_main_query() || $query->get('orderby') !== 'filesize') return;

    $query->set('meta_key', '_gmy_filesize');
    $query->set('orderby', 'meta_value_num');
}

// Sayfa başına öğe seçimi
add_action('restrict_manage_media', 'gmy_items_per_page');
add_filter('parse_query', 'gmy_filter_items_per_page');

function gmy_items_per_page() {
    $per_page = $_GET['per_page'] ?? 20;
    ?>
    <label><?php _e('Gösterim:', 'gelismis-medya-yoneticisi'); ?>
        <select name="per_page" onchange="this.form.submit()">
            <?php foreach ([5,10,20,50,100] as $num): ?>
            <option value="<?= $num ?>" <?php selected($per_page, $num) ?>>
                <?= $num ?>
            </option>
            <?php endforeach; ?>
        </select>
    </label>
    <?php
}

function gmy_filter_items_per_page($query) {
    if (!is_admin() || !$query->is_main_query()) return;
    
    if (isset($_GET['per_page']) && in_array($_GET['per_page'], [5,10,20,50,100])) {
        $query->set('posts_per_page', $_GET['per_page']);
    }
}

// Popup HTML
add_action('admin_footer', 'gmy_popup_html');

function gmy_popup_html() {
    ?>
    <div id="gmy-popup" style="display:none">
        <div class="gmy-popup-content">
            <img src="" alt="<?php _e('Ön izleme', 'gelismis-medya-yoneticisi'); ?>">
            <button class="gmy-close">&times;</button>
        </div>
    </div>
    <?php
}

------------------------------------------------------------------------------------------------------------------------

Kod:Tümünü seçKopyala

admin.css

Kod:Tümünü seçKopyala

/* Medya Listesi Stilleri */
.widefat .column-thumbnail { 
    width: 120px; 
}
.gmy-preview img { 
    max-width: 100px; 
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.gmy-preview:hover img {
    transform: scale(1.05);
}

/* Popup Stilleri */
#gmy-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gmy-popup-content {
    position: relative;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    max-width: 80%;
    max-height: 80vh;
}

.gmy-popup-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.gmy-close {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 18px;
    line-height: 28px;
    padding: 0;
}

------------------------------------------------------------------------------------------------------------------------

Kod:Tümünü seçKopyala

admin.js

Kod:Tümünü seçKopyala

jQuery(document).ready(function($) {
    // Popup Açma
    $('.gmy-preview').on('click', function(e) {
        e.preventDefault();
        const imgUrl = $(this).attr('href');
        $('#gmy-popup').fadeIn(300).find('img').attr('src', imgUrl);
    });

    // Popup Kapatma
    $('#gmy-popup').on('click', function(e) {
        if ($(e.target).closest('.gmy-popup-content').length === 0) {
            $(this).fadeOut(200);
        }
    });
    
    $('.gmy-close').on('click', function() {
        $('#gmy-popup').fadeOut(200);
    });
});

------------------------------------------------------------------------------------------------------------------------

klasör addı

Kod:Tümünü seçKopyala

omy-media-manager

<?php
/*
Plugin Name: Özel Medya Yöneticisi
Description: Tamamen bağımsız yeni nesil medya yönetim sistemi
Version: 1.0
Author: Sizin Adınız
*/

defined('ABSPATH') || exit;

// Yeni admin menüsü ekle
add_action('admin_menu', 'omy_create_menu');

function omy_create_menu() {
    add_submenu_page(
        'upload.php', // Media altında görünsün
        'Özel Medya Yöneticisi',
        'Özel Medya',
        'upload_files',
        'omy-media-manager',
        'omy_render_admin_page'
    );
}

// Admin sayfasını render et
function omy_render_admin_page() {
    ?>
    <div class="wrap">
        <h1>Özel Medya Yöneticisi</h1>
        
        <div class="omy-controls">
            <?php omy_render_per_page_dropdown(); ?>
            <?php omy_render_sort_controls(); ?>
        </div>

        <?php
        $media_table = new OMY_Media_List_Table();
        $media_table->prepare_items();
        $media_table->display();
        ?>
        
        <div id="omy-preview-modal" style="display:none">
            <div class="omy-modal-content">
                <img src="" alt="Önizleme">
                <button class="omy-close">&times;</button>
            </div>
        </div>
    </div>
    <?php
}

// Özel WP_List_Table sınıfı
if (!class_exists('WP_List_Table')) {
    require_once ABSPATH . 'wp-admin/includes/class-wp-list-table.php';
}

class OMY_Media_List_Table extends WP_List_Table {

    function __construct() {
        parent::__construct([
            'singular' => 'media',
            'plural'   => 'media',
            'ajax'     => false
        ]);
    }

    function get_columns() {
        return [
            'thumbnail' => 'Önizleme',
            'title'     => 'Dosya Adı',
            'size'      => 'Boyut',
            'date'      => 'Yükleme Tarihi',
            'type'      => 'Tür'
        ];
    }

    function prepare_items() {
        $per_page = $this->get_items_per_page('omy_media_per_page', 20);
        $current_page = $this->get_pagenum();
        
        $args = [
            'post_type'      => 'attachment',
            'posts_per_page' => $per_page,
            'paged'         => $current_page,
            'post_status'    => 'inherit'
        ];

        // Sıralama
        if (isset($_GET['orderby']) {
            switch ($_GET['orderby']) {
                case 'size':
                    $args['meta_key'] = '_omy_filesize';
                    $args['orderby'] = 'meta_value_num';
                    break;
                default:
                    $args['orderby'] = $_GET['orderby'];
            }
        }

        // Filtreleme
        if (isset($_GET['order']) && in_array($_GET['order'], ['asc', 'desc'])) {
            $args['order'] = $_GET['order'];
        }

        $query = new WP_Query($args);
        $this->items = $query->posts;

        $this->set_pagination_args([
            'total_items' => $query->found_posts,
            'per_page'    => $per_page
        ]);
    }

    function column_default($item, $column_name) {
        switch ($column_name) {
            case 'thumbnail':
                $url = wp_get_attachment_url($item->ID);
                $thumb = wp_get_attachment_image($item->ID, 'thumbnail');
                return sprintf('<a href="%s" class="omy-preview">%s</a>', $url, $thumb);
                
            case 'size':
                $size = get_post_meta($item->ID, '_omy_filesize', true);
                return $size ? size_format($size) : 'Bilinmiyor';
                
            case 'type':
                return get_post_mime_type($item->ID);
                
            case 'date':
                return get_the_date('', $item->ID);
                
            default:
                return print_r($item, true);
        }
    }

    function get_sortable_columns() {
        return [
            'title' => ['title', false],
            'date'  => ['date', false],
            'size'  => ['size', false]
        ];
    }
}

// Yardımcı fonksiyonlar
function omy_render_per_page_dropdown() {
    $per_page = get_user_meta(get_current_user_id(), 'omy_media_per_page', true) ?: 20;
    ?>
    <select id="omy-per-page" onchange="omyUpdatePerPage(this.value)">
        <?php foreach ([5,10,20,50,100] as $num): ?>
        <option value="<?= $num ?>" <?php selected($per_page, $num) ?>>
            <?= $num ?> öğe/göster
        </option>
        <?php endforeach; ?>
    </select>
    <?php
}

function omy_render_sort_controls() {
    $orderby = $_GET['orderby'] ?? 'date';
    $order = $_GET['order'] ?? 'desc';
    ?>
    <select id="omy-sort-by" onchange="omyUpdateSort(this.value)">
        <option value="date" <?php selected($orderby, 'date') ?>>Tarihe göre</option>
        <option value="title" <?php selected($orderby, 'title') ?>>Ada göre</option>
        <option value="size" <?php selected($orderby, 'size') ?>>Boyuta göre</option>
    </select>
    
    <select id="omy-sort-order" onchange="omyUpdateSortOrder(this.value)">
        <option value="asc" <?php selected($order, 'asc') ?>>Artan</option>
        <option value="desc" <?php selected($order, 'desc') ?>>Azalan</option>
    </select>
    <?php
}

// Script ve stiller
add_action('admin_enqueue_scripts', 'omy_admin_assets');

function omy_admin_assets($hook) {
    if ($hook !== 'media_page_omy-media-manager') return;

    wp_enqueue_style('omy-admin-css', plugins_url('css/omy-admin.css', __FILE__));
    wp_enqueue_script('omy-admin-js', plugins_url('js/omy-admin.js', __FILE__), ['jquery']);
}

// Dosya boyutu meta verilerini yönet
add_action('add_attachment', 'omy_save_filesize');
add_action('edit_attachment', 'omy_save_filesize');

function omy_save_filesize($post_id) {
    $file_path = get_attached_file($post_id);
    if ($file_path && file_exists($file_path)) {
        update_post_meta($post_id, '_omy_filesize', filesize($file_path));
    }
}

/* Ana container */
.omy-controls {
    margin: 20px 0;
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Tablo stilleri */
.wp-list-table .column-thumbnail {
    width: 120px;
    text-align: center;
}

.omy-preview img {
    max-width: 100px;
    height: auto;
    cursor: zoom-in;
    transition: transform 0.3s ease;
}

.omy-preview:hover img {
    transform: scale(1.05);
}

/* Modal */
#omy-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 99999;
    display: none;
    justify-content: center;
    align-items: center;
}

.omy-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    background: #fff;
    padding: 15px;
    border-radius: 5px;
}

.omy-modal-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

.omy-close {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #ff4444;
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 30px;
}

omy-admin.js

jQuery(document).ready(function($) {
    // Preview modal
    $('.omy-preview').click(function(e) {
        e.preventDefault();
        const imgUrl = $(this).attr('href');
        $('#omy-preview-modal').fadeIn(300).find('img').attr('src', imgUrl);
    });

    // Close modal
    $('#omy-preview-modal').on('click', function(e) {
        if ($(e.target).is('.omy-close') || $(e.target).is('#omy-preview-modal')) {
            $(this).fadeOut(200);
        }
    });

    // Per page update
    window.omyUpdatePerPage = function(value) {
        const url = new URL(window.location.href);
        url.searchParams.set('per_page', value);
        window.location.href = url.toString();
    }

    // Sort update
    window.omyUpdateSort = function(value) {
        const url = new URL(window.location.href);
        url.searchParams.set('orderby', value);
        window.location.href = url.toString();
    }

    window.omyUpdateSortOrder = function(value) {
        const url = new URL(window.location.href);
        url.searchParams.set('order', value);
        window.location.href = url.toString();
    }
});

dosya yapısı

Kod:Tümünü seçKopyala

wp-content/plugins/
└── omy-media-manager/
    ├── omy-media-manager.php
    ├── css/
    │   └── omy-admin.css
    └── js/
        └── omy-admin.js

Kod:Tümünü seçKopyala

omy-media-manager.php

Kod:Tümünü seçKopyala

<?php
/*
Plugin Name: Özel Medya Yöneticisi
Description: Tamamen bağımsız medya yönetim sistemi
Version: 1.0
Author: Sizin Adınız
*/

defined('ABSPATH') || exit;

// Admin menüsü ekle
add_action('admin_menu', 'omy_create_menu');

function omy_create_menu() {
    add_submenu_page(
        'upload.php',
        'Özel Medya Yöneticisi',
        'Özel Medya',
        'upload_files',
        'omy-media-manager',
        'omy_render_admin_page'
    );
}

// Admin sayfası
function omy_render_admin_page() {
    ?>
    <div class="wrap">
        <h1 class="wp-heading-inline">Özel Medya Yöneticisi</h1>
        
        <div class="omy-controls">
            <?php omy_render_per_page_dropdown(); ?>
            <?php omy_render_sort_controls(); ?>
        </div>

        <?php
        $media_table = new OMY_Media_List_Table();
        $media_table->prepare_items();
        $media_table->display();
        ?>
        
        <div id="omy-preview-modal" style="display:none">
            <div class="omy-modal-content">
                <img src="" alt="Önizleme">
                <button class="omy-close">&times;</button>
            </div>
        </div>
    </div>
    <?php
}

// WP_List_Table sınıfı
if (!class_exists('WP_List_Table')) {
    require_once ABSPATH . 'wp-admin/includes/class-wp-list-table.php';
}

class OMY_Media_List_Table extends WP_List_Table {

    function __construct() {
        parent::__construct([
            'singular' => 'media',
            'plural'   => 'media',
            'ajax'     => false
        ]);
    }

    function get_columns() {
        return [
            'thumbnail' => 'Önizleme',
            'title'     => 'Dosya Adı',
            'size'      => 'Boyut',
            'date'      => 'Yükleme Tarihi',
            'type'      => 'Tür'
        ];
    }

    function prepare_items() {
        $per_page = $this->get_items_per_page('omy_media_per_page', 20);
        $current_page = $this->get_pagenum();
        
        $args = [
            'post_type'      => 'attachment',
            'posts_per_page' => $per_page,
            'paged'          => $current_page,
            'post_status'    => 'inherit'
        ];

        // Sıralama
        if (isset($_GET['orderby'])) {
            switch ($_GET['orderby']) {
                case 'size':
                    $args['meta_key'] = '_omy_filesize';
                    $args['orderby'] = 'meta_value_num';
                    break;
                case 'title':
                    $args['orderby'] = 'title';
                    break;
                default:
                    $args['orderby'] = 'date';
            }
        }

        if (isset($_GET['order']) && in_array($_GET['order'], ['asc', 'desc'])) {
            $args['order'] = $_GET['order'];
        }

        $query = new WP_Query($args);
        $this->items = $query->posts;

        $this->set_pagination_args([
            'total_items' => $query->found_posts,
            'per_page'    => $per_page
        ]);
    }

    function column_default($item, $column_name) {
        switch ($column_name) {
            case 'thumbnail':
                $url = wp_get_attachment_url($item->ID);
                $thumb = wp_get_attachment_image($item->ID, 'thumbnail');
                return sprintf('<a href="%s" class="omy-preview">%s</a>', esc_url($url), $thumb);
                
            case 'size':
                $size = get_post_meta($item->ID, '_omy_filesize', true);
                return $size ? size_format($size) : 'Bilinmiyor';
                
            case 'type':
                return get_post_mime_type($item->ID);
                
            case 'date':
                return get_the_date('', $item->ID);
                
            default:
                return esc_html($item->post_title);
        }
    }

    function get_sortable_columns() {
        return [
            'title' => ['title', false],
            'date'  => ['date', false],
            'size'  => ['size', false]
        ];
    }
}

// Yardımcı fonksiyonlar
function omy_render_per_page_dropdown() {
    $per_page = isset($_GET['per_page']) ? absint($_GET['per_page']) : 20;
    ?>
    <select id="omy-per-page" onchange="omyUpdatePerPage(this.value)">
        <?php foreach ([5,10,20,50,100] as $num): ?>
        <option value="<?php echo $num; ?>" <?php selected($per_page, $num); ?>>
            <?php printf(esc_html__('%d öğe/göster', 'omy-media'), $num); ?>
        </option>
        <?php endforeach; ?>
    </select>
    <?php
}

function omy_render_sort_controls() {
    $orderby = isset($_GET['orderby']) ? sanitize_text_field($_GET['orderby']) : 'date';
    $order = isset($_GET['order']) ? sanitize_text_field($_GET['order']) : 'desc';
    ?>
    <select id="omy-sort-by" onchange="omyUpdateSort(this.value)">
        <option value="date" <?php selected($orderby, 'date'); ?>><?php esc_html_e('Tarihe göre', 'omy-media'); ?></option>
        <option value="title" <?php selected($orderby, 'title'); ?>><?php esc_html_e('Ada göre', 'omy-media'); ?></option>
        <option value="size" <?php selected($orderby, 'size'); ?>><?php esc_html_e('Boyuta göre', 'omy-media'); ?></option>
    </select>
    
    <select id="omy-sort-order" onchange="omyUpdateSortOrder(this.value)">
        <option value="asc" <?php selected($order, 'asc'); ?>><?php esc_html_e('Artan', 'omy-media'); ?></option>
        <option value="desc" <?php selected($order, 'desc'); ?>><?php esc_html_e('Azalan', 'omy-media'); ?></option>
    </select>
    <?php
}

// Script ve stil dosyaları
add_action('admin_enqueue_scripts', 'omy_admin_assets');

function omy_admin_assets($hook) {
    if ($hook !== 'media_page_omy-media-manager') return;

    wp_enqueue_style(
        'omy-admin-css', 
        plugins_url('css/omy-admin.css', __FILE__),
        [],
        filemtime(plugin_dir_path(__FILE__) . 'css/omy-admin.css')
    );

    wp_enqueue_script(
        'omy-admin-js', 
        plugins_url('js/omy-admin.js', __FILE__), 
        ['jquery'], 
        filemtime(plugin_dir_path(__FILE__) . 'js/omy-admin.js'), 
        true
    );
}

// Dosya boyutu meta verileri
add_action('add_attachment', 'omy_save_filesize');
add_action('edit_attachment', 'omy_save_filesize');

function omy_save_filesize($post_id) {
    $file_path = get_attached_file($post_id);
    if ($file_path && file_exists($file_path)) {
        update_post_meta($post_id, '_omy_filesize', filesize($file_path));
    }
}

Kod:Tümünü seçKopyala

omy-admin.css

Kod:Tümünü seçKopyala

/* Temel stiller */
.omy-controls {
    margin: 20px 0;
    display: flex;
    gap: 15px;
    align-items: center;
    background: #f6f7f7;
    padding: 15px;
    border-radius: 5px;
}

/* Tablo stilleri */
.widefat .column-thumbnail {
    width: 120px;
    text-align: center;
}

.omy-preview img {
    max-width: 100px;
    height: auto;
    cursor: zoom-in;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.omy-preview:hover img {
    transform: scale(1.05);
}

/* Modal */
#omy-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.95);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.omy-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.omy-modal-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.omy-close {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #dc3232;
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
}

Kod:Tümünü seçKopyala

omy-admin.js

Kod:Tümünü seçKopyala

jQuery(document).ready(function($) {
    // Preview modal
    $(document).on('click', '.omy-preview', function(e) {
        e.preventDefault();
        const imgUrl = $(this).attr('href');
        $('#omy-preview-modal').fadeIn(300).find('img').attr('src', imgUrl);
    });

    // Close modal
    $(document).on('click', '.omy-close, #omy-preview-modal', function(e) {
        if ($(e.target).closest('.omy-modal-content').length === 0 || $(e.target).hasClass('omy-close')) {
            $('#omy-preview-modal').fadeOut(200);
        }
    });

    // Sayfalama ve sıralama
    window.omyUpdatePerPage = function(value) {
        const url = new URL(window.location.href);
        url.searchParams.set('per_page', value);
        window.location.href = url.toString();
    };

    window.omyUpdateSort = function(value) {
        const url = new URL(window.location.href);
        url.searchParams.set('orderby', value);
        window.location.href = url.toString();
    };

    window.omyUpdateSortOrder = function(value) {
        const url = new URL(window.location.href);
        url.searchParams.set('order', value);
        window.location.href = url.toString();
    };
});