プラグイン不要！！ページネーション設置方法
僕はワードプレスを始めてまだ浅いですが、今の段階で すでにプラグイン同士のバッティングによる不具合と思われる現象が起きていて、ワードプレスの拡張性や自由度の高さを実感している一方で、同じように不安要素も尽きません。
プラグインにしても なるべく使わずに作業を進めていきたいと思っている今日この頃‥。
注意点
ということで、ここでは「プラグインを使わずにページネーションを設置する方法」をまとめておきます。
【 完成画像 】
手順としては、functions.phpで読み込んで index.phpで出力して CSSで調整していくという流れです。
この手順で以下のコードを記述していきます。
プラグイン不要！！のページネーション設置手順
「function.php」ファイルに記述
まずは「functions.php」に以下のコードを記述していきますが、その前に「functions.php」ファイルを編集する際の注意点から。
この「functions.php」ファイルは、関数ファイルが集約されていて 管理画面の表示やサイト表示をする際にも読み込まれるファイルで、特別なファイルという位置づけにあります。
カスタマイズしたりプラグインを追加する時は、この「functions.php」ファイルの編集をするプロセスを踏むことが多くなります。
編集の際は細心の注意が必要で、記述ミスが1文字でもあるとエラーメッセージが表示されて画面が真っ白になり、管理画面にもサイトにもアクセスできなくなってしまいます。
つまり データが消えてしまうということです。
そうなった場合、初期の段階であればデータ量も少ないので大きなダメージはないですが、内容量が多い状態のものであれば、その損失は計り知れません。
なので、「function.php」ファイルをいじる際は、念のためにバックアップを取っておいた方が安全です。
注意点
「function.php」ファイルをいじる際は、念のためにバックアップを取っておく。
こういった注意点を踏まえて、「functions.php」ファイルに以下のコードを記述していきます。
【 functions.php 】
1
function pagination($pages = '', $range = 4)
2
{
3
$showitems = ($range * 2)+1;
4
5
global $paged;
6
if(empty($paged)) $paged = 1;
7
8
if($pages == '')
9
{
10
global $wp_query;
11
$pages = $wp_query->max_num_pages;
12
if(!$pages)
13
{
14
$pages = 1;
15
}
16
}
17
18
if(1 != $pages)
19
{
20
echo "<div class=\"pagination clearfix\"><span>Page ".$paged." of ".$pages."</span>";
21
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='"
22
.get_pagenum_link(1)."'>« First</a>";
23
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)
24
."'>‹ Previous</a>";
25
26
for ($i=1; $i <= $pages; $i++)
27
{
28
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) ||
29
$pages <= $showitems ))
30
{
31
echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='"
32
.get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
33
}
34
}
35
36
if ($paged < $pages && $showitems < $pages) echo "<a href=\""
37
.get_pagenum_link($paged + 1)."\">Next ›</a>";
38
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages)
39
echo "<a href='".get_pagenum_link($pages)."'>Last »</a>";
40
echo "</div>\n";
41
}
42
}
43
index.phpファイルに記述
次に、ページネーションを設置したい箇所に、出力するためのコードを記述。
ここでは、index.phpファイルの＜div id=”content”＞～＜/div＞の閉めタグの直前に設置しました。
【 index.php 】
1
<!-- ページネーションエリア -->
2
3
pagination($additional_loop->max_num_pages);
4
} ?>
5
<!-- /ページネーションエリア -->
デザインやレイアウトをCSSで調整していく
デザインはデフォルトのままになっているので、あとはCSSで調整していきます。
【 style.css 】
1
/*ページネーションエリア*/
2
div.pagination {
3
clear:both;
4
position:relative;
5
font-size:11px;
6
line-height:13px ;
7
vertical-align: middle;
8
width:550px;
9
height:20px;
10
}
11
12
div.pagination span, .pagination a {
13
display:block;
14
float:left ;
15
margin: 2px 2px 2px 0 ;
16
padding:6px 9px 5px 9px ;
17
text-decoration:none;
18
width:auto ;
19
background-color: #ffffff;
20
border:1px solid #E47273;
21
color:#E47273;
22
border-radius:3px
23
}
24
25
div.pagination a:hover{
26
color:#fff ;
27
background-color:#E47273
28
}
29
30
div.pagination .current{
31
padding:6px 9px 5px 9px ;
32
background-color:#E47273;
33
color:#fff
34
}
35
参考サイト
http://sgwordpress.com/teaches/how-to-add-wordpress-pagination-without-a-plugin/
関連記事WordPressカスタマイズ関連の記事
サイドバー以外の場所にも複数のウィジェットを設置する方法
まず、functions.phpファイルを開いて、register_sidebar();の設定を設置したいウィジェットの数だけ記述する。
1箇所に設定するのであれば1個設定し、2箇所に設定するのであれば以下の図のように2個設定する。
上記のように2つ記述して、管理画面から「ウィジェット」画面を開いて確認すると、「サイドバー1」「サイドバー2」という名前で二つのウィジェットエリアが作成されているので、あとは右側にドラッグしてメニューを有効化する。
無効化したい場合は、同じようにドラッグして戻せば無効化される。
有効化したウィジェットエリアを出力させる
上記までの操作で有効化するまでが完了しているので、次に実際に画面上に出力する設定をしていく。
複数の有効化されたウィジェットエリアがある場合、「サイドバー1」というウィジェットエリアを出力するには、テンプレートに＜！?php dynamic_sidebar(1);?＞と記述。
「サイドバー2」というウィジェットエリアを出力するには、テンプレートに＜!?php dynamic_ sidebar(2);?＞と記述。
関連記事WordPressカスタマイズ関連の記事
【TIPS】CSSだけで実装できる！！ エレガンチックな「LIGHT BOX」
CSSだけで表現できるエレガンチックな「LIGHT BOX」3パターン。
記述の手順は、以下のサイトからソースをダウンロードし、対象とする画像の＜img＞タグにコードをつけて、あとはパターンごとの個別のCSSをリンクさせるという流れ。
http://tympanus.net/codrops/2011/12/26/css3-lightbox/
パターン【 1 】 scale-up / fade-in animation
縮小サイズの状態からフェードインするアニメーション
まずはhtmlファイルに以下のコードを記述(※画像２枚分のコード) 【 html 】
1
<section>
2
<ul class="lb-album">
3
<li>
4
<a href="#image-1">
5
<img src="images/thumbs/12.jpg" alt="image01">
6
<span>鯛の姿造り</span>
7
</a>
8
<div class="lb-overlay" id="image-1">
9
<img src="images/full/12.jpg" alt="image01" />
10
<div>
11
<h3>鯛の姿造り <span>/タイノスガタヅクリ/</h3>
12
<p></p>
13
</div>
14
<a href="#page" class="lb-close">x Close</a>
15
</div>
16
</li>
17
18
<li>
19
<a href="#image-2">
20
<img src="images/thumbs/17.jpg" alt="image02">
21
<span>甘エビの握り</span>
22
</a>
23
<div class="lb-overlay" id="image-2">
24
<img src="images/full/17.jpg" alt="image02" />
25
<div>
26
<h3>甘エビの握り <span>/アマエビノニギリ/</h3>
27
<p></p>
28
</div>
29
<a href="#page" class="lb-close">x Close</a>
30
</div>
31
</li>
32
</ul>
33
</section>
【 html 】
1
<head>
4
</head>
パターン【 2 】 scale-down / fade-in animation
拡大サイズの状態からフェードインするアニメーション
まずはhtmlファイルに以下のコードを記述(※画像２枚分のコード) 【 html 】
1
<section>
2
<ul class="lb-album">
3
<li>
4
<a href="#image-1">
5
<img src="images/thumbs/13.jpg" alt="image01">
6
<span>日本の風景-5</span>
7
</a>
8
<div class="lb-overlay" id="image-1">
9
<img src="images/full/13.jpg" alt="image01" />
10
<div>
11
<h3>日本の風景-5 <span>/japanese scene/</h3>
12
<p></p>
13
</div>
14
<a href="#page" class="lb-close">x Close</a>
15
</div>
16
</li>
17
18
<li>
19
<a href="#image-2">
20
<img src="images/thumbs/15.jpg" alt="image02">
21
<span>日本の風景-4</span>
22
</a>
23
<div class="lb-overlay" id="image-2">
24
<img src="images/full/15.jpg" alt="image02" />
25
<div>
26
<h3>日本の風景-4 <span>/japanese scene/</h3>
27
<p></p>
28
</div>
29
<a href="#page" class="lb-close">x Close</a>
30
</div>
31
</li>
32
</ul>
33
</section>
【 html 】
1
<head>
4
</head>
パターン【 3 】 Fade-in & navigation
フェードイン＋ナビゲーション
まずはhtmlファイルに以下のコードを記述(※画像２枚分のコード) 【 html 】
1
<section>
2
<ul class="lb-album">
3
<li>
4
<a href="#image-1">
5
<img src="images/thumbs/1.jpg" alt="image01">
6
<span>Pointe</span>
7
</a>
8
<div class="lb-overlay" id="image-1">
9
<img src="images/full/1.jpg" alt="image01" />
10
<div>
11
<h3>pointe <span>/point/</h3>
12
<p>Dance performed on the tips of the toes</p>
13
<a href="#image-10" class="lb-prev">Prev</a>
14
<a href="#image-2" class="lb-next">Next</a>
15
</div>
16
<a href="#page" class="lb-close">x Close</a>
17
</div>
18
</li>
19
20
<li>
21
<a href="#image-2">
22
<img src="images/thumbs/2.jpg" alt="image02">
23
<span>Port de bras</span>
24
</a>
25
<div class="lb-overlay" id="image-2">
26
<img src="images/full/2.jpg" alt="image02" />
27
<div>
28
<h3>port de bras <span>/ˌpôr də ˈbrä/</h3>
29
<p>An exercise designed to develop graceful movement and disposition of the arms</p>
30
<a href="#image-1" class="lb-prev">Prev</a>
31
<a href="#image-3" class="lb-next">Next</a>
32
</div>
33
<a href="#page" class="lb-close">x Close</a>
34
</div>
35
</li>
36
</ul>
37
</section>
【 html 】
1
<head>
4
</head>
関連記事LIGHT BOX関連の記事
プラグインを使わずに、コードを追加するだけでパンくずリストを設定する方法
プラグインを使わずにコードを追加するだけで「パンくずリスト」を設定する方法をまとめておきます。
手順としては まず「functions.php」ファイルに記述する作業になるので その際の注意点から。
この「functions.php」ファイルは、関数ファイルが集約されていて 管理画面の表示やサイト表示をする際にも読み込まれるファイルで、特別なファイルという位置づけにあります。
カスタマイズしたりプラグインを追加する時は、この「functions.php」ファイルの編集をするプロセスを踏むことが多くなります。
編集の際は細心の注意が必要で、記述ミスが1文字でもあるとエラーメッセージが表示されて画面が真っ白になり、管理画面にもサイトにもアクセスできなくなってしまいます。
つまり データが消えてしまうということです。
そうなった場合、初期の段階であればデータ量も少ないので大きなダメージはないですが、内容量が多い状態のものであれば、その損失は計り知れません。
なので、「function.php」ファイルをいじる際は、念のためにバックアップを取っておいた方が安全です。
注意点
「function.php」ファイルをいじる際は、念のためにバックアップを取っておく。
こういった注意点を踏まえて、「functions.php」ファイルに以下のコードを記述していきます。
phpファイルは「 ＜？php 」 で始まり 「 ？＞ 」で終わるので、この間のどこかの箇所に入れる。
【 functions.php 】
1
<?php
2
function breadcrumb($divOption = array("id" => "breadcrumb", "class" =>"clearfix")){
3
global $post;
4
$str ='';
5
if(!is_home()&&!is_admin()){ /* !is_admin は管理ページ以外という条件分岐 */
6
$tagAttribute = '';
7
foreach($divOption as $attrName => $attrValue){
8
$tagAttribute .= sprintf(' %s="%s"', $attrName, $attrValue);
9
}
10
$str.= '<div'. $tagAttribute .'>';
11
$str.= '<ul>';
12
$str.= '<li><a href="'. home_url() .'/">HOME</a></li>';
13
$str.= '<li>></li>';
14
15
if(is_category()) { //カテゴリーのアーカイブページ
16
$cat = get_queried_object();
17
if($cat -> parent != 0){
18
19
foreach($ancestors as $ancestor){
20
$str.='<li><a href="'. get_category_link($ancestor) .'">'. get_cat_name($ancestor)
21
.'</a></li>';
22
$str.='<li>></li>';
23
}
24
}
25
$str.='<li>'. $cat -> name . '</li>';
26
} elseif(is_single()){ //ブログの個別記事ページ
27
$categories = get_the_category($post->ID);
28
$cat = $categories[0];
29
if($cat -> parent != 0){
30
31
foreach($ancestors as $ancestor){
32
$str.='<li><a href="'. get_category_link($ancestor).'">'. get_cat_name($ancestor)
33
. '</a></li>';
34
$str.='<li>></li>';
35
}
36
}
37
$str.='<li><a href="'. get_category_link($cat -> term_id). '">'. $cat-> cat_name
38
. '</a></li>';
39
$str.='<li>></li>';
40
$str.= '<li>'. $post -> post_title .'</li>';
41
} elseif(is_page()){ //固定ページ
42
if($post -> post_parent != 0 ){
43
44
foreach($ancestors as $ancestor){
45
46
</li>';
47
$str.='<li>></li>';
48
}
49
}
50
$str.= '<li>'. $post -> post_title .'</li>';
51
} elseif(is_date()){ //日付ベースのアーカイブページ
52
53
$str.='<li><a href="'. get_year_link(get_query_var('year')). '">' .
54
get_query_var('year'). '年</a></li>';
55
$str.='<li>></li>';
56
$str.='<li><a href="'. get_month_link(get_query_var('year'), get_query_var
57
('monthnum')). '">'. get_query_var('monthnum') .'月</a></li>';
58
$str.='<li>></li>';
59
$str.='<li>'. get_query_var('day'). '日</li>';
60
61
$str.='<li><a href="'. get_year_link(get_query_var('year')) .'">'.
62
get_query_var('year') .'年</a></li>';
63
$str.='<li>></li>';
64
$str.='<li>'. get_query_var('monthnum'). '月</li>';
65
} else { //年別アーカイブ
66
$str.='<li>'. get_query_var('year') .'年</li>';
67
}
68
} elseif(is_search()) { //検索結果表示ページ
69
$str.='<li>「'. get_search_query() .'」で検索した結果</li>';
70
} elseif(is_author()){ //投稿者のアーカイブページ
71
$str .='<li>投稿者 : '. get_the_author_meta('display_name', get_query_var('author'))
72
.'</li>';
73
} elseif(is_tag()){ //タグのアーカイブページ
74
$str.='<li>タグ : '. single_tag_title( '' , false ). '</li>';
75
} elseif(is_attachment()){ //添付ファイルページ
76
$str.= '<li>'. $post -> post_title .'</li>';
77
} elseif(is_404()){ //404 Not Found ページ
78
79
} else{ //その他
80
$str.='<li>'. wp_title('', true) .'</li>';
81
}
82
$str.='</ul>';
83
$str.='</div>';
84
}
85
echo $str;
86
}
87
?>
88
次に呼び出しコードで呼び出します。
以下のコードを表示したいテンプレートに追加します。
以上です。
デザインやレイアウトはデフォルトのままなので、カスタマイズする場合はCSSで調整していけば完成。
参考サイトhttps://gist.github.com/wate/50a4186223f187128549
関連記事WordPressカスタマイズ関連の記事
世界中にある一流大学の講義を無料で受けられるWEBサービス「MOOC」(ムーク)
MOOC ( ムーク：MassiveOpenOnlineCourse。直訳すると「大規模オンライン公開講座」)とは、近年アメリカの教育現場で浸透し始めているオンライン学習のこと。
ハーバード、スタンフォード、MITなどをはじめ、世界中の一流大学が提供するオンライン講義を無料で受けることができます。
ちなみに2013年2月に、日本の大学として初めて東京大学がCourseraのMOOCSに参加を表明しています。
東大が誰でも無料で履修できるオンライン講座を９月に開講
これまでも東京大学ではオープンコースウェア（OpenCourseWare、OCW）として、正規の授業の講義資料や講義映像を、インターネット上で無料公開してきた。同様の取り組みは、他の大学でも行われている。
こうしたオープンコースウェアとMOOCの違いは、前者が「授業資料の無償公開」であるのに対して、後者は「履修認定も含むオンライン講座の無償公開」であること。
具体的には、学内での講義や資料をそのまま配信するのではなく、MOOCに向けた独自の講義をスタジオで新たに収録して配信。課題を提供したり、試験を行ったりして評価まで行う。最後まで受講し、一定の基準に達したと評価された者には、修了したことを示す「履修証」が発行される。
この履修証は、あくまで一定の成績で講座を修了したことを示すもので、「単位」ではない。 米国では、Courseraの講義を単位として認める動きもあるというが、東京大学では単なる修了したことの証明にとどまる。
参考サイト：日本経済新聞 http://www.nikkei.com/article/DGXNASFK2203E_S3A220C1000000/
この記事では、以下の主要なMOOC5選をピックアップしてみます。
1. KhanAcademy ( カーンアカデミー )
2. Coursera ( コーセラ )
3. edx ( エデックス )
4. Udacity ( ユーダシティ )
5. gacco ( ガッコ )
1. KhanAcademy(カーンアカデミー)https://www.khanacademy.org/
カーンアカデミーは、2006年にサルマンカーンによって設立されたWEBサービスで、ビルゲイツなどが支援する非営利のNPOでもある。
”ネットを通して高水準の教育を無償で誰にでもどこにでも提供する”という理念のもと、現在3000本以上のビデオ教材が提供されている。
学べる分野は、物理 数学 経済学 歴史等など多岐に渡る。
Subjects
● Math
● Science
● Economics and finance
● Arts and humanities
● Computer programming
● Computer science
MORE…
2. Coursera(コーセラ)https://www.coursera.org/
コーセラは、スタンフォード大学のコンピュータサイエンスの教授らが創立した営利団体。
スタンフォード大学、プリンストン大学などの一流大学を始め 世界中の大学と協力し、それらの大学のコースのいくつかを無償でオンライン上に提供している。
2013年2月時点では、62の大学がコーセラを通じてオンラインの授業を発信している。
また同月に、日本の大学として初めて東京大学がCourseraのMOOCsに参加表明している。
学べる分野は、コンピュータサイエンス、医学、経済学、経営学、統計学等など、多岐に渡る。
Subjects
● Arts and Humanities
● Business
● Computer Science
● Data Science
● Life Sciences
● Math and Logic
● Personal Development
● Physical Science and Engineering
● Social Sciences
3. edx(エデックス)https://www.edx.org/
エデックスは、マサチューセッツ工科大学とハーバード大学が共同で創立したMOOCのプラットフォームの一つ。
所定の基準を満たすと修了証を取得できるけれど、現時点ではまだ単位の取得までは認められていない。
2013年5月に京都大学が日本の大学として初めて参加している。
Subjects
● Architecture
● Art & Culture
● Biology & Life Sciences
● Business & Management
● Computer Science
● Design
● Economics & Finance
● Language
● Social Sciences
MORE…
4. Udacity(ユーダシティ)https://www.udacity.com/
Udacityは、スタンフォード大学教授のセバスチャン・スラン氏が中心となり創設したMOOCのプラットフォームの一つ。
科学 技術工学 数学などの分野に特化していて、Google,Facebookなど業界のトップ企業と共同開発した講座や、各分野のリーダーたちによる講義を受けられのが魅力。
また、「Nanodegrees」(ナノ学位)という独自の学位制度があり、モバイル及びWEBコンピューティングの技術トレーニングプログラムで学位を取得できることで、求職者に対し新しいキャリアやチャンスに繋げるための機会を提供している。
5. gacco(ガッコ)http://gacco.org/index.html
gaccoは、 NTTドコモが構築したプラットフォームで、東大 早慶の教授による講義を無料で受けることのできる日本初のMOOCサービス。
一回の講義は、１０分程度の動画になっていて、スマホ タブレットでも受講可能など、いつでもどこでも学べるような設計になっている。
様々なジャンルの講師による本格的な講義を受けることができ、所定の基準を満たすと修了証を取得できる。
Subjects
● コンピュータサイエンス
● 政治学
● 法律
● 統計学
● ビジネス
● 心理学
● 音楽
● ファッション
等など
関連記事無料で利用できる便利なWEBサービスの紹介記事
