<![CDATA[<?php
/*
Plugin Name: Blog Slider Widget
Description: Elementor için modern blog slider widget'ı
Version: 1.0.0
Author: GFA Development & Design Studio
Author URI: https://gkhn.dev/
Text Domain: blog-slider-widget
*/
if (!defined('ABSPATH')) {
exit;
}
// Admin menüsünü oluştur
add_action('admin_menu', function() {
add_menu_page(
'Blog Slider Ayarları',
'Blog Slider',
'manage_options',
'blog-slider-settings',
'blog_slider_settings_page',
'dashicons-slides',
30
);
});
// Ayarları kaydet
add_action('admin_init', function() {
register_setting('blog-slider-settings-group', 'blog_slider_posts');
});
// Admin panel sayfası
function blog_slider_settings_page() {
if (isset($_POST['blog_slider_posts'])) {
update_option('blog_slider_posts', $_POST['blog_slider_posts']);
echo '<div class="notice notice-success is-dismissible"><p>Ayarlar kaydedildi.</p></div>';
}
$selected_posts = get_option('blog_slider_posts', array());
?>
<div class="wrap">
<h1>Blog Slider Ayarları</h1>
<form method="post" action="">
<table class="form-table">
<tr>
<th scope="row">Gösterilecek Yazılar</th>
<td>
<div style="margin-bottom: 10px;">
<input type="text" id="post-search" class="regular-text" placeholder="Yazılarda ara..." style="width: 300px;">
</div>
<select name="blog_slider_posts[]" id="posts-select" multiple style="min-width: 300px; min-height: 200px;">
<?php
$posts = get_posts(array(
'post_type' => 'post',
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'DESC'
));
foreach ($posts as $post) {
$selected = in_array($post->ID, (array)$selected_posts) ? 'selected' : '';
echo sprintf(
'<option value="%d" %s data-title="%s">%s</option>',
$post->ID,
$selected,
esc_attr(strtolower($post->post_title)),
esc_html($post->post_title)
);
}
?>
</select>
<p class="description">CTRL tuşu ile birden fazla yazı seçebilirsiniz. Yukarıdaki arama kutusunu kullanarak yazıları filtreleyebilirsiniz.</p>
</td>
</tr>
</table>
<?php submit_button('Kaydet'); ?>
</form>
<div style="margin-top: 50px; padding: 20px; background: #f9f9f9; border-radius: 5px; text-align: center; border-top: 3px solid #000;">
<p style="margin: 0; color: #666;">
Developed with ❤️ by <a href="https://gkhn.dev/" target="_blank" style="color: #000; text-decoration: none; font-weight: 500;">GFA Development & Design Studio</a>
</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.getElementById('post-search');
const selectElement = document.getElementById('posts-select');
const options = Array.from(selectElement.options);
// Arama fonksiyonu
function filterPosts(search) {
const searchTerm = search.toLowerCase().trim();
options.forEach(option => {
const title = option.getAttribute('data-title');
if (title.includes(searchTerm)) {
option.style.display = '';
} else {
option.style.display = 'none';
}
});
}
// Arama input event listener
searchInput.addEventListener('input', function(e) {
filterPosts(e.target.value);
});
// Enter tuşunu engelle
searchInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
}
});
// Seçili öğeleri göster
function showSelectedItems() {
const selectedOptions = Array.from(selectElement.selectedOptions);
if (selectedOptions.length > 0) {
searchInput.value = '';
filterPosts('');
}
}
selectElement.addEventListener('change', showSelectedItems);
});
</script>
<?php
}
// Elementor widget'ını kaydet
add_action('elementor/widgets/register', function($widgets_manager) {
class Blog_Slider_Widget extends \Elementor\Widget_Base {
public function get_name() {
return 'blog-slider';
}
public function get_title() {
return 'Blog Slider';
}
public function get_icon() {
return 'eicon-slider-3d';
}
public function get_categories() {
return ['general'];
}
public function get_script_depends() {
return [];
}
public function get_style_depends() {
return [];
}
protected function register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => 'İçerik Ayarları',
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
// Blog yazılarını seçme kontrolü
$posts = get_posts([
'post_type' => 'post',
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'DESC'
]);
$posts_options = [];
foreach ($posts as $post) {
$posts_options[$post->ID] = $post->post_title;
}
$this->add_control(
'selected_posts',
[
'label' => 'Blog Yazıları',
'type' => \Elementor\Controls_Manager::SELECT2,
'options' => $posts_options,
'multiple' => true,
'default' => array_keys($posts_options),
'description' => 'Slider\'da gösterilecek yazıları seçin. Hiçbir seçim yapılmazsa admin panelinde seçili yazılar gösterilir.'
]
);
$this->add_control(
'autoplay',
[
'label' => 'Otomatik Oynat',
'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => 'Evet',
'label_off' => 'Hayır',
'return_value' => 'yes',
'default' => 'yes',
]
);
$this->add_control(
'autoplay_speed',
[
'label' => 'Otomatik Oynatma Hızı (ms)',
'type' => \Elementor\Controls_Manager::NUMBER,
'default' => 5000,
'condition' => [
'autoplay' => 'yes',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'style_section',
[
'label' => 'Stil Ayarları',
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'slider_height',
[
'label' => 'Slider Yüksekliği',
'type' => \Elementor\Controls_Manager::SLIDER,
'size_units' => ['px'],
'range' => [
'px' => [
'min' => 300,
'max' => 1000,
'step' => 10,
],
],
'default' => [
'unit' => 'px',
'size' => 600,
],
'selectors' => [
'{{WRAPPER}} .featured-slider' => 'height: {{SIZE}}{{UNIT}};',
],
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
// Önce widget ayarlarından seçili yazıları kontrol et
$selected_posts = !empty($settings['selected_posts']) ? $settings['selected_posts'] : get_option('blog_slider_posts', array());
// Debug bilgisi
if (current_user_can('manage_options')) {
echo '<!-- Debug: Seçili post ID\'leri: ' . implode(', ', (array)$selected_posts) . ' -->';
}
if (empty($selected_posts)) {
echo '<div style="padding: 20px; text-align: center; background: #f7f7f7; border-radius: 5px;">
Lütfen WordPress admin panelinden Blog Slider menüsünden gösterilecek yazıları seçin.
</div>';
return;
}
$args = array(
'post_type' => 'post',
'post__in' => (array)$selected_posts,
'orderby' => 'post__in',
'posts_per_page' => -1
);
$query = new WP_Query($args);
if ($query->have_posts()) : ?>
<style>
.featured-slider {
margin: 0 0 4rem 0;
position: relative;
overflow: hidden;
background: #000;
border-radius: 24px;
}
.featured-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.8s ease;
visibility: hidden;
}
.featured-slide.active {
opacity: 1;
visibility: visible;
}
.featured-image {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 1;
}
.featured-content {
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
padding: 4rem;
padding-left: 8rem;
width: 100%;
background: linear-gradient(0deg,
rgba(0,0,0,0.95) 0%,
rgba(0,0,0,0.8) 50%,
rgba(0,0,0,0) 100%);
color: #fff;
}
.featured-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
line-height: 1.2;
max-width: 800px;
}
.featured-date {
font-size: 0.875rem;
opacity: 0.7;
margin-bottom: 1.5rem;
}
.featured-excerpt {
font-size: 1.1rem;
max-width: 600px;
margin-bottom: 2rem;
opacity: 0.9;
}
.featured-meta {
display: flex;
align-items: center;
}
.featured-author {
display: flex;
align-items: center;
gap: 0.75rem;
}
.featured-author-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.2);
}
.featured-author-info {
line-height: 1.4;
}
.featured-author-name {
font-weight: 500;
}
.featured-author-role {
font-size: 0.875rem;
opacity: 0.7;
}
.featured-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 100%;
padding: 0 2rem;
display: flex;
justify-content: space-between;
pointer-events: none;
}
.featured-nav button {
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
backdrop-filter: blur(8px);
transition: all 0.3s ease;
pointer-events: auto;
}
.featured-nav button:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.featured-indicators {
position: absolute;
bottom: 2rem;
right: 4rem;
z-index: 3;
display: flex;
gap: 0.75rem;
}
.featured-indicator {
width: 2.5rem;
height: 0.25rem;
background: rgba(255, 255, 255, 0.3);
border-radius: 1rem;
cursor: pointer;
transition: all 0.3s ease;
}
.featured-indicator:hover {
background: rgba(255, 255, 255, 0.5);
}
.featured-indicator.active {
background: #fff;
width: 3.5rem;
}
@media (max-width: 768px) {
.featured-content {
padding: 2rem;
}
.featured-title {
font-size: 1.75rem;
}
.featured-excerpt {
font-size: 1rem;
}
.featured-nav {
padding: 0 1rem;
}
.featured-content {
padding: 2rem;
padding-left: 3rem;
}
}
</style>
<div class="featured-slider" data-autoplay="<?php echo $settings['autoplay']; ?>" data-autoplay-speed="<?php echo $settings['autoplay_speed']; ?>">
<?php while ($query->have_posts()) : $query->the_post();
$author_id = get_the_author_meta('ID');
$author_avatar = get_avatar_url($author_id, ['size' => 150]);
?>
<div class="featured-slide">
<a href="<?php the_permalink(); ?>" class="featured-link">
<?php if (has_post_thumbnail()) : ?>
<?php echo get_the_post_thumbnail(get_the_ID(), 'full', ['class' => 'featured-image']); ?>
<?php endif; ?>
<div class="featured-content">
<h2 class="featured-title"><?php echo get_the_title(); ?></h2>
<div class="featured-date"><?php echo get_the_date(); ?></div>
<p class="featured-excerpt"><?php echo wp_trim_words(get_the_excerpt(), 20); ?></p>
<div class="featured-meta">
<div class="featured-author">
<img decoding="async" src="<?php echo $author_avatar; ?>" alt="<?php echo get_the_author(); ?>" class="featured-author-avatar">
<div class="featured-author-info">
<div class="featured-author-name"><?php echo get_the_author(); ?></div>
<div class="featured-author-role"><?php echo get_the_author_meta('description') ? get_the_author_meta('description') : 'Yazar'; ?></div>
</div>
</div>
</div>
</div>
</a>
</div>
<?php endwhile; wp_reset_postdata(); ?>
<div class="featured-nav">
<button aria-label="Önceki">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</button>
<button aria-label="Sonraki">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</div>
<div class="featured-indicators">
<?php for ($i = 0; $i < $query->post_count; $i++) : ?>
<div class="featured-indicator<?php echo $i === 0 ? ' active' : ''; ?>" data-index="<?php echo $i; ?>"></div>
<?php endfor; ?>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const slider = document.querySelector('.featured-slider');
if (!slider) return;
const slides = slider.querySelectorAll('.featured-slide');
const prevButton = slider.querySelector('button[aria-label="Önceki"]');
const nextButton = slider.querySelector('button[aria-label="Sonraki"]');
const indicators = slider.querySelectorAll('.featured-indicator');
let currentSlide = 0;
let autoplayInterval;
function showSlide(index) {
slides.forEach(slide => {
slide.classList.remove('active');
});
indicators.forEach(indicator => {
indicator.classList.remove('active');
});
slides[index].classList.add('active');
indicators[index].classList.add('active');
}
function nextSlide() {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
}
function prevSlide() {
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
showSlide(currentSlide);
}
// Event listeners
prevButton.addEventListener('click', prevSlide);
nextButton.addEventListener('click', nextSlide);
indicators.forEach((indicator, index) => {
indicator.addEventListener('click', () => {
currentSlide = index;
showSlide(currentSlide);
if (autoplayInterval) {
clearInterval(autoplayInterval);
startAutoplay();
}
});
});
// Autoplay
function startAutoplay() {
if (slider.dataset.autoplay === 'yes') {
const speed = parseInt(slider.dataset.autoplaySpeed) || 5000;
autoplayInterval = setInterval(nextSlide, speed);
}
}
// Initialize
showSlide(0);
startAutoplay();
// Pause autoplay on hover
slider.addEventListener('mouseenter', () => {
if (autoplayInterval) {
clearInterval(autoplayInterval);
}
});
slider.addEventListener('mouseleave', () => {
startAutoplay();
});
});
</script>
<?php else : ?>
<div style="padding: 20px; text-align: center; background: #f7f7f7; border-radius: 5px;">
Seçili yazılar bulunamadı.
</div>
<?php endif;
}
protected function content_template() {
return '';
}
}
$widgets_manager->register(new Blog_Slider_Widget());
});
// Elementor yüklü değilse uyarı göster
add_action('admin_notices', function() {
if (!did_action('elementor/loaded')) {
echo '<div class="notice notice-warning is-dismissible">
<p>Blog Slider Widget için Elementor eklentisinin yüklü ve aktif olması gerekiyor.</p>
</div>';
}
}); ]]>