「colorbox.js」を使ってモーダルウィンドウを実現したい

前提・実現したいこと

「colorbox.js」を使用して、モーダルウィンドウを実装したいのですがコードを入れていじってみたところCSSとJS自体のファイルを読み込んでいないようです。

FTPサーバー内に「colorbox.js」をファイルに入れて読み込むコードをhtmlに記載しているのですが
csstとjsが効いていないような感覚があります。

「colorbox.js」のファイルにはダウンロード時から、デザインファイルが入っておりきっちり実装されていればフレームなどが表示されるはずかと思うのですが、表示されません。

発生している問題・エラーメッセージ

画像を設置しており、クリックすると画像は大きくなりモーダルっぽくはなるのですが
正規のものは黒い透過の背景で裏のコンテンツが透けて見えるはずですが、真っ黒で背景が見えません。
画像も大きく表示されおり、、元の画面に戻ることができません。

該当のソースコード

html
1<html <?php language_attributes(); ?> class="no-js no-svg">
2<head>
3<meta charset="<?php bloginfo( 'charset' ); ?>">
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<link rel="profile" href="http://gmpg.org/xfn/11">
6<!-- ▼ColorboxのCSSを読み込む記述 -->
7<link rel="stylesheet" href="twentyseventeen/colorbox.css" />
8<?php wp_deregister_script('jquery'); ?>
9<!-- WordPressのjQueryを読み込ませない -->
10<?php wp_head(); ?>
11
12<!-- ▼jQueryとColorboxのスクリプトを読み込む記述 -->
13
14<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
15<script src="jquery.colorbox-min.js"></script>
16<!-- ▼Colorboxの適用対象の指定とオプションの記述 -->
17<script>
18jQuery(document).ready(function(){
19jQuery(".ex").colorbox({rel:'ex'});
20});
21</script>

試したこと

↓のコードを表示した固定ページのhtmlに記載しました。

html
1<a href="http://●●.jp/wp-content/uploads/2019/01/pulpFiction1_002.jpg" class="ex" title="">
2<img src="http://●●.jp/wp-content/uploads/2019/01/pulpFiction1_002.jpg" width="300" alt="">
3</a>

↓のコードでも試してみましたが、読み込みませんでした。

html
1<script src="http://●●.jp/wp-content/themes/twentyseventeen/colorbox"></script>

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

PHP
1<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/colorbox/colorbox.css" />
2<?php wp_deregister_script('jquery');
3wp_head(); ?>
4<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
5<script src="<?php echo get_stylesheet_directory_uri(); ?>/colorbox/jquery.colorbox-min.js"></script>