الموقع في وضع الصيانة حاليًا، لكن هل حاولت استخدام أحد الإضافات التالية لتنفيذ ما تريده؟

ما تريد تنفيذه يسمى lightbox لذلك يمكنك تنفيذ ذلك من خلال البحث عن wordpress lightbox ويمكنك أيضاً تنفيذ ذلك بدون أي إضافات قم بالبحث أيضاً عن lightbox wordpress without plugin ومثال على ذلك

ستحتاج إلى تعديل ملف style.css لموقعك الإلكتروني لإضافة التعليمات البرمجية التالية:

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  transition: opacity 0.5s;
}
.lightbox-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
.lightbox-image img {
  max-width: 100%;
  max-height: 100%;
}
.lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}
.lightbox-open {
  opacity: 1;
}
.lightbox-image:hover {
  opacity: 0.7;
}
.lightbox-close:hover {
  opacity: 1;
}

و ستحتاج إلى تعديل ملف functions.php لموقعك الإلكتروني لإضافة التعليمات البرمجية التالية:

function my_add_lightbox() {
  // Add the lightbox class to images
  add_filter('the_content', function($content) {
    return str_replace('<img', '<img class="lightbox"', $content);
  });
}

add_action('init', 'my_add_lightbox');