前置き
フロントページにて新着投稿だけ全文表示にするカスタムテンプレートです。
ブログカード表示を複数列で設定している場合にも対応しました。
例えば、1ページに表示する最大投稿数が4の場合、最新の投稿が全文表示された下に、最新の投稿を含む4件の投稿がブログカードで表示されます。
2ページ目以降は、4件の投稿すべてがブログカードで表示されます。
対象者
本テンプレート適用には、Cocoon の子テーマフォルダ直下の functions.php の編集作業を必要とします。
functions.php を編集できない場合は、ご利用になれませんのでご了承ください。
動作確認 Ver
- Cocoonバージョン: 2.2.2
- Cocoon Childバージョン: 1.1.2
注意点
対象外
「ホームページの表示」設定で固定ページをホームページに設定されている場合、このカスタムテンプレートはご利用になれませんので、ご了承ください。
非表示パーツ
フロントページでの全文表示では、以下のものを表示する設定にされていても、表示されないためご注意ください。
- ページ送りナビ
- 関連記事
- 関連記事下の広告
- 関連記事下のウィジェット
- コメントフォーム
- コメントフォーム下ウィジェット
あくまでフロントページで非表示なるだけなので、個別投稿ページでは上記のものも表示されます。
フロントページタイプ
フロントページでの全文表示では、Cocoon 設定のフロントページタイプの設定が無効になり、いずれの設定でも「一覧（デフォルト）」設定と同様の外観になります。
カードタイプ
フロントページでの全文表示では、Cocoon 設定のカードタイプの「大きなカード（先頭のみ）」設定が無効です。
「大きなカード（先頭のみ）」を設定した場合、「エントリーカード（デフォルト）」設定と同様の外観になります。
パンくずリスト配置
フロントページでの全文表示では、Cocoon 設定のパンくずリスト配置設定の メインカラムトップかメインカラムボトムのみ対応しています。
上記以外の設定の場合、全文表示中の投稿にパンくずリストが表示されません。
あくまでフロントページで非対応なだけなので、個別投稿ページではいずれの設定でも対応しています。
インストール
テンプレートファイルダウンロード
以下の4つのファイルをダウンロードしてください。
ファイル構造
FTP ソフトなどで、Cocoon の子テーマフォルダの下に「tmp」というフォルダを作成し、ダウンロードしたファイルを下図のように置いてください。
パーミッション設定
フォルダは「755」、php ファイルは「644」でパーミッションを設定してください。
functions.php 編集
上記 functions.php のファイル末尾に、以下の関数群を追記してください。
////////////////////////////////////////////////////////////////////////////////
// リソース読み込み時の is_singular() 判定に「|| is_full_text()」を追加
////////////////////////////////////////////////////////////////////////////////
// ホームページの表示 > 固定ページ > 投稿ページ > 'full-text' なら true
function is_full_text() {
if ( is_home() ) {
$page = get_post( get_option( 'page_for_posts' ) );
if ( strcmp( $page->post_name, 'full-text' ) === 0 ) {
return true;
}
}
return false;
}
// lib/utils.php
//ソースコードのハイライト表示に必要なリソースの読み込み
if ( !function_exists( 'wp_enqueue_highlight_js' ) ):
function wp_enqueue_highlight_js(){
//global $pagenow;
if ( (is_code_highlight_enable() && (is_singular() || is_full_text())) || is_admin_php_page() ) {
if (is_code_highlight_package_light()) {
$file_name = 'highlight.min.js';
} else {
$file_name = 'highlight.all.min.js';
}
//ソースコードハイライト表示用のスタイル
wp_enqueue_style( 'code-highlight-style', get_highlight_js_css_url() );
//ソースコードハイライト表示用のライブラリ
$url = get_template_directory_uri() . '/plugins/highlight-js/'.$file_name;
$url = apply_filters( 'code_highlight_js_url', $url );
wp_enqueue_script( 'code-highlight-js', $url, array( 'jquery' ), false, true );
if (is_admin_php_page()) {
$selector = '.entry-content pre';
} else {
$selector = get_code_highlight_css_selector();
}
$data = minify_js('
(function($){
$("'.$selector.'").each(function(i, block) {
hljs.highlightBlock(block);
});
})(jQuery);
');
wp_add_inline_script( 'code-highlight-js', $data, 'after' ) ;
}
}
endif;
// lib/image.php
//Lightboxを表示するページかどうか
if ( !function_exists( 'is_lightboxable_page' ) ):
function is_lightboxable_page(){
return (is_singular() || is_full_text()) || (is_category() && !is_paged()) || (is_tag() && !is_paged());
}
endif;
// lib/utils.php
//ScrollHint
if ( !function_exists( 'wp_enqueue_scrollhint' ) ):
function wp_enqueue_scrollhint(){
if (is_responsive_table_enable() && ((is_singular() || is_full_text()) || (is_category() && !is_paged())|| (is_tag() && !is_paged()))) {
//ScrollHintスタイルの呼び出し
wp_enqueue_style( 'scrollhint-style', get_template_directory_uri() . '/plugins/scroll-hint-master/css/scroll-hint.css' );
//ScrollHintスクリプトの呼び出し
wp_enqueue_script( 'scrollhint-js', get_template_directory_uri() . '/plugins/scroll-hint-master/js/scroll-hint.min.js', array( 'jquery' ), false, true );
$data = minify_js('
(function($){
new ScrollHint(".scrollable-table", {
suggestiveShadow: true,
i18n: {
scrollable: "'.__( 'スクロールできます', THEME_NAME ).'"
}
});
})(jQuery);
');
wp_add_inline_script( 'scrollhint-js', $data, 'after' ) ;
}
}
endif;設定方法
固定ページ作成
- WordPress ダッシュボード「固定ページ」>「新規作成」をクリック
- タイトルに「full-text」を入力して「公開」をクリック
ホームページの表示設定
- WordPress ダッシュボード「設定」>「表示設定」をクリック
- 「ホームページの表示」で「固定ページ」を選択後、
「ホームページ」で「— 選択 —」を選択、
「投稿ページ」で「full-text」を選択して「変更を保存」をクリック
完成！
[オプション]最新投稿のブログカード装飾
最新投稿のブログカードを装飾したい場合、スタイルシートにて、以下の要素名でスタイルを設定できます。
.front .entry-card-wrap:first-childサンプル
前置きの適用イメージでは、以下の装飾を行っています。
- グレースケール化（80%）
- 半透明化（不透明度：40%）
- 表示中のアイコン表示
.front .entry-card-wrap:first-child {
filter: opacity(0.4) grayscale(0.8);
}
.front .entry-card-wrap:first-child::before {
filter: opacity(1);
width: 100px;
background-color: rgba(0,0,0,0);
color: #fff;
content: '表示中';
text-align: center;
position: absolute;
z-index: 100;
top: 50%;
left: 50%;
transform: translateY(15px) translateX(-50px);
}
.front .entry-card-wrap:first-child::after {
filter: opacity(0.8);
padding-top: 5px;
height: 100px;
width: 100px;
background-color: #000;
border-radius: 25%;
color: #fff;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 2.4em;
content: '\f26c';
text-align: center;
vertical-align: middle;
position: absolute;
z-index: 99;
top: 50%;
left: 50%;
transform: translateY(-50px) translateX(-50px);
}※ 日本語を使用していますので、css ファイルの文字コードにはお気を付けください。
設定解除方法
ホームページの表示設定
- WordPress ダッシュボード「設定」>「表示設定」をクリック
- 「ホームページの表示」で「最新の投稿」を選択もしくは、
「投稿ページ」で別の固定ページを選択して「変更を保存」をクリック
最後に
テンプレートをご使用の際は、念のためバックアップを取るなど万が一に備えておくことをおすすめします。
テンプレートを作成した際の備忘録記事もありますので、もし作り方などが気になる方はこちらをご参照ください。
見た目上は複数列ブログカード表示対応なのですが、基本的な作り方を前回から大きく変えました。
コメント