Month: April 2020

WordPressのモバイルビューでサイドバーを投稿記事の上下に表示する

※2020/07/03追記 後日談はこちら WordPressのモバイルビューでサイドバーを投稿記事の上下に表示する(追記版) やりたいこと やりたいことはタイトルの通りだが、少しわかりにくいので図で表すと以下のイメージ パソコンでは右側に表示されるサイドバーを、 モバイルでは、上下二つに分けて、投稿記事サマリを挟む形で上下に表示する 手順は、「【1】サイドバーの定義」「【2】サイドバーの表示」「【3】モバイルビューでの表示位置決め」の3ステップ ※前提知識として、テンプレートファイルの編集方法は、以下の記事の「テンプレートファイルの編集方法」を参照ください 参考:WordPressのモバイルビューで、ブログ投稿のサマリを表示しないようにする 【1】サイドバーを2つ定義する(register_sidebar) サイドバーの定義 まずは、サイドバーを定義する 「function.php」に以下のように記載 サイドバーが既にテンプレートにある場合は、元々定義されているサイドバー定義があるはずなので、追記だけでなく、適宜名前など変更する 今回私は、二つサイドバーを作りたかったので、元々あるサイドバーを「sidebar-1」として、追加のサイドバーを「sidebar-2」として定義した サイドバーのWidgetsの編集 サイドバーを定義すると、「Appearance」>「Widgets」の編集画面で、定義したサイドバーの枠が追加され、Widgetsが編集できるようになるので、 お好きなWidgetsをお好きな場所にドラッグ&ドロップで配置する 参考:関数リファレンス/register_sidebar 【2】ページにサイドバーを表示する(get_sidebar) サイドバーファイルの作成 サイドバーを定義しただけでは、ページに表示されないので、 定義したサイドパーを、各ページに表示させる まずは、定義さサイドバーのphpファイルをそれぞれ作成する ファイルの作成はGUIではできないので、直接サーバに入って作成する必要がある ※私の環境(Bitnami)では、「/opt/bitnami/apps/wordpress/htdocs/wp-content/themes/【テンプレート名】」配下に必要なファイルが格納されている ※今回私が使っているのは「nucleare」というテンプレートなので、適宜各環境に置き換えてお考えください 元々、「sidebar.php」というファイルがあるので、このファイルを参考に「sidebar-1.php」「sidebar-2.php」のファイルを作成する 中身はそれぞれこんな感じ サイドバーを各ページに表示する 先ほど作成したサイドバーのファイルを、各ページのファイルから呼び出すことで、 サイドバーが各ページに表示されるようにする 表示するには、以下の文言を各ページファイルに追記する 「get_sidebar(‘1’)」の「1」は、サイドバーファイルのタイトル「sidebar-1.php」のハイフンより後(1)を指定することで呼び出すことができる 私は、どのページにもサイドバーを表示させたいので、以下ファイルに文言を追記した 参考:関数リファレンス/get_sidebar 【3】モバイルでのサイドバーの表示位置を定義する 最後に、モバイルビューの場合の表示位置を定義する 「style.css」に以下を追記する 「.site-content」で枠を定義 「secondary(sidebar-1)」→「.content-area(ブログ投稿)」→「thirdry(sidebar-2)」の順番で表示させたいので、上から1、2、3と番号を振る 「-webkit-box-ordinal-group」や「-moz-box-ordinal-group」など色々な表現で記載されているのは、表示されるブラウザによって定義の方法が異なるため なので、なるべく種類多めに記載しておく これで、晴れて、モバイル(max-width: 985px)では「sidebar-1」→「ブログ投稿」→「sidebar-2」と表示されるようになる 以上 ※2020/07/03追記 後日談はこちら WordPressのモバイルビューでサイドバーを投稿記事の上下に表示する(追記版)

WordPressのモバイルビューで、ブログ投稿のサマリを表示しないようにする

※20201001 Update: こちらの記事も参照ください WordPressのAstraテンプレートでブログ投稿サマリの行数を減らす ※2020/07/03追記 後日談はこちら WordPressのモバイルビューで、ブログ投稿のサマリを表示しないようにする(追記版) WordPressのブログ記事で、 モバイルでサマリが表示されると縦に長くなって見えにくくなってしまうので、 モバイルから見るときだけサマリを表示しないようにした これを こうするイメージ テンプレートファイルの編集方法 まずは前提から。 WordPressのスタイルシートなど、テンプレートファイルの編集は 「Appearance」>「Theme Editor」から編集できる 追記だけなら「CSS editor」をうこともできるが、 自由度が高いので、私は「Theme Editor」が好き もしくは、サーバに入って、直接ファイルを編集しても良い ※私の環境(Bitnami)では、「/opt/bitnami/apps/wordpress/htdocs/wp-content/themes/【テンプレート名】」配下に必要なファイルが格納されている ※今回私が使っているのは「nucleare」というテンプレートなので、適宜各環境に置き換えてお考えください テンプレートファイルの種類とブログ投稿のサマリ表示箇所の確認 index.phpというファイルを覗くと ブログ記事の投稿リストを定義することができる ※他にも、ヘッダーはheader.phpなど、色々種類がある。 各ファイルの役割については、こちらのリンク参照 参考:テーマの作成 index.phpの中をみると、以下のようにコメントの記載がある コメントによると、「詳しくは「content-___.php」を見に行けよ」とのこと contemtから始まるファイルは以下の四つなので「content.php」を見てみる content.phpの中を見ると、33行目あたりに「<?php the_excerpt(); ?>」という記述がある 「<?php the_excerpt(); ?>」は、投稿の抜粋を表示するタグであるので、 この位置に投稿のサマリが表示されるんだなということがわかる 参考:テンプレートタグ/the excerpt ブログ投稿のサマリを表示しない方法1(自由度が高い方法) モバイルビューでブログ投稿のサマリを表示しない方法としてはいくつかあり、 自由度が高いのが、excerpt_lengthを使って「ブログ投稿サマリの長さ(単語数)をゼロにする方法」 以下をfunction.phpに追記する 「if ( wp_is_mobile() ) 」でモバイルビューの場合と定義し、「excerpt_length」を使って投稿サマリの長さを定義する 今回は「return 0」なので、長さはゼロ(表示しない) 参考: 関数リファレンス/wp_is_mobile …

WordPressのモバイルビューで、ブログ投稿のサマリを表示しないようにする Read More »