Lightbox WordPressの画像アップロードへのCSS/JSギャラリーの統合

Question

私はWordPressの初心者です。 私はLightbox CSS/JSで構築されたギャラリーを持つHTML/BOOTSTARP "1ページ"テンプレートを持っています。

テンプレートリンクhereを参照してください。

私はこのテーマをWordPressに統合していますが、すべて正常に動作します。

今、WordPressを使用してこの既存のギャラリーに画像をアップロードしたいと思います。 投稿を作成すると、これを新しい投稿としてアップロードするオプションが与えられます。

私は8つのポートフォリオを持っており、ワードプレスから特定のポートフォリオに複数の写真を追加して、自動的にアップロードできるようにしたいと考えています。

これは1ページのウェブサイトであることをご了承ください。

<section id="portfolio"> 
 
    <link href="css/lightbox.css" rel="stylesheet"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="heading text-center col-sm-8 col-sm-offset-2 wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms"> 
 
      <h2>Our Gallery</h2> 
 
      
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
     <div class="col-sm-3"> 
 
      <div class="folio-item wow fadeInRightBig" data-wow-duration="1000ms" data-wow-delay="300ms"> 
 
      <div class="folio-image"> 
 
       <img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/1.jpg" alt=""> 
 
      </div> 
 
      <div class="overlay"> 
 
       <div class="overlay-content"> 
 
       <div class="overlay-text"> 
 
        <div class="folio-info"> 
 
        <h3>gallery</h3> 
 
        <p></p> 
 
        </div> 
 
        <div class="folio-overview"> 
 
        <span class="folio-link"><a class="folio-read-more" href="#" data-single_url="portfolio-single.php" ><i class="fa fa-link"></i></a></span> 
 
        <span class="folio-expand"><a href="<?php bloginfo('template_directory') ?>/img//portfolio/portfolio-details.jpg" data-lightbox="portfolio"><i class="fa fa-search-plus"></i></a></span> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <div class="folio-item wow fadeInLeftBig" data-wow-duration="1000ms" data-wow-delay="400ms"> 
 
      <div class="folio-image"> 
 
       <img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/2.jpg" alt=""> 
 
      </div> 
 
      <div class="overlay"> 
 
       <div class="overlay-content"> 
 
       <div class="overlay-text"> 
 
        <div class="folio-info"> 
 
        <!-- <h3>Time Hours</h3> 
 
        <p>Design, Photography</p>--> 
 
        </div> 
 
        <div class="folio-overview"> 
 
        <span class="folio-link"><a class="folio-read-more" href="#" data-single_url="portfolio-single.php" ><i class="fa fa-link"></i></a></span> 
 
        <span class="folio-expand"><a href="<?php bloginfo('template_directory') ?>/img//portfolio/portfolio-details.jpg" data-lightbox="portfolio"><i class="fa fa-search-plus"></i></a></span> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <div class="folio-item wow fadeInRightBig" data-wow-duration="1000ms" data-wow-delay="500ms"> 
 
      <div class="folio-image"> 
 
       <img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/3.jpg" alt=""> 
 
      </div> 
 
      <div class="overlay"> 
 
       <div class="overlay-content"> 
 
       <div class="overlay-text"> 
 
        <div class="folio-info"> 
 
        <!--<h3>Time Hours</h3>

ポートフォリオ

のコード親切にそれを行う方法についてのご提案で私を助けて。

Answer 1

まず

<img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/2.jpg" alt=""> 

<a href="<?php bloginfo('template_directory') ?>/img//portfolio/portfolio-details.jpg" data-lightbox="portfolio"><i class="fa fa-search-plus"></i></a> 

実際のファイルが見つからないためにつながるダブルスラッシュ "//" を持っています。

Lightbox CSSとJavaScriptファイルが正しく読み込まれていることを確認しましたか？エラーがある場合は、コンソールを参照してください。