固定ページでタイトルを非表示にする 方法 WordPress

20151107_article-title-hideSimplicity
固定ページでタイトルを非表示にする 方法  Simplicity
この記事は約8分で読めます。
只今当サイトのテーマはSimplicityではなく「Cocoon」を有難く使用させて頂いています。
この記事は前身のSimplicityの使い手として書いていた記事ですが
内容的には他のテーマでも大丈夫なんで宜しければ使ってやって下さい。
古い記事なのに長い間留守にし更新してなくってごめんなさいね💦 
他のページもコツコツ見直し中です。ご了承の程~😅  2020年11月10日 39maより

 

固定ページでタイトルを非表示にする 方法 Simplicity

えー。前回、確か「締めた」筈のこのシリーズ(固定ページのみ〇〇を非表示にする方法)。
もう一つ、実行している事について、書き忘れがありました。
それは「固定ページ」で記事タイトルを表示しない方法です。
 
と、いう事で、固定ページのみ〇〇を非表示にする方法シリーズ、小さく復活~

この記事は、ミッション4って事になります。

これまでのシリーズ記事

 ミッション0⇒Simplicity 親テーマのファイルを書き換えずにカスタマイズする
 ミッション1⇒固定ページの日付(投稿日・更新日)を非表示にする方法 Simplicity
 ミッション2⇒固定ページ のみ SNSボタン を 非表示にする 方法 Simplicity
 ミッション3⇒固定ページの投稿者名・編集を非表示にする方法 Simplicity

一番簡単でシンプルな方法。
タイトルを非表示にしたければ、編集画面のタイトル枠に、何も書かなければ表示はされません。
わりかし簡単~。・・・って、冗談です。

タイトル無しでは、投稿一覧表示で閲覧する時、「どれがどれだっけ?」なんて、
解りにくかったりしますし、
SEOだの、キーワードを重視される方等は、そーいう訳にはいきませんよね。
(でもですよ、非表示にするんだから、そもそも関係ないと思うんですよね。
言い換えると固定ページは静的なページだからSEOとかキーワードなんてあまり重視しなくて良いと思う・・・)

タイトルなしでは何かと不便なので、
タイトルを書きつつ、固定ページの記事タイトルを非表示にしてしまう方法を書きます。

全ての固定ページの記事タイトルの表示を消す方法

その1 スタイルシートで非表示指定する

Simplicity の子テーマのスタイルシートstyle.cssに、以下の様に書き足します。

私の場合、実際にはTJ Custom CSS に書き足しました。
TJ Custom CSS についての詳しくは、
前記事⇒TJ Custom CSS 各CSSファイルを変更しなくてもカスタマイズOK~をご参照下さい😐

/*******************************
* 固定ページ記事タイトル非表示
********************************/
.type-page h1,
.type-page 
.post-meta{
  display:none;
}

これで、全ての固定ページで表示されなくなります。

でも、このコードの書き方だとメタ情報も表示されなくなりますので、
(んと、私はmeta情報も固定ページでは要らない派なので。)
メタメタを残したい場合は、 以下の書き方でも、非表示にできます。

/*******************************
* 固定ページ記事タイトル非表示
********************************/
.page 
.entry-title {
  display: none;
}

その2 固定ページファイル (page.php)の変更で非表示にする 基本準備

このシリーズ記事のミッション2までは、
Simplicity の親テーマの固定ページテンプレートを使ってカスタマイズする様に記していましたが、
親テーマの固定ページファイル (page.php)子テーマに複製(コピー)して、
子テーマの固定ページファイル (page.php)の方を触ります。

子テーマには、page.phpがありませんので、複製します。
(移動ではなく、あくまでも複製ですのでご注意を)

not-show-contributor_0.1

   テーマの編集画面でも、
   固定ページファイルの
 page.phpファイルが編集可能。

 子テーマへpage.phpの入れ方です。

 FTPでSimplicityの親テーマから、
 page.phpを自分のローカル側(PC)に
   ダウンロードします。

 そのダウンロードしたpage.phpを、
 そのまま、子テーマにアップロード。
 これで、複製(コピー)完了。

 すると、外観    テーマの編集画面でも、
   固定ページファイルの
 page.phpファイルが編集可能になります。

 この作業はロリポップユーザーの方でも、
   ロリポップFTPで簡単にできます。

 ※この辺りのレクチャーもはじめてな方に
   分かりやすいように書かないと。

 ・・・と思いつつ。
   取り急ぎ的な書き方で申し訳ない。
   何れ書いたらリンクします。
 

こうして、子テーマに入れたファイルを、子テーマ内で変更する。という事になります。

こうする事で親テーマのファイルを書き換えずにカスタマイズする事になりますので、
親テーマがバージョンアップしても、
変更したファイルをイチイチ書き換える必要がなくなります。

詳しい基本的な事は、子テーマに無いファイルを親テーマから複製する。に記しています。

子テーマ内固定ページファイル (page.php)編集

前項で親テーマが引き継いだ子テーマの
Simplicity child固定ページテンプレート (page.php)
を編集します。
※自己責任でお願いします😐 
書き換えが不安な場合は、子テーマの固定ページテンプレート (page.php)の内容を予め
TeraPad(テキストエディター)等にコピーしておくか
親から再び引き継ぐ等して間違えた時様にスペアを取っておくと良いと思います。

外観⇒テーマの編集⇒Simplicity child固定ページテンプレート (page.php)をクリックします。

not-show-contributor_3子テーマ内のテーマの編集画面。固定ページファイルのpage.phpファイルが編集可能。

タイトルのクラス(class)は「entry-title」なので、class=”entry-title”を探して、
投稿タイトル”entry-title”を表示しなければOKです。

class=”entry-title”は、10行目にあります。
<h1 class=”entry-title”><?php echo get_the_title(); ?></h1>

<h1 class=”entry-title”><?php echo get_the_title(); ?></h1> この一行⇑を削除します。

これで、全ての固定ページでタイトルが非表示になります。

削除するのが、嫌!!って場合は、以下の様に、コメントアウト(<!– –>)して
何時でも戻せるようにしておくのも良いと思います。
<!–<h1 class=”entry-title”><?php echo get_the_title(); ?></h1>–>

指定した固定ページのみ、記事タイトルの表示を消す方法

スタイルシートでpage-idを指定して、非表示にする

今度は、指定した固定ページだけ、記事タイトルを非表示にする方法です。

前項と同じく、Simplicity の子テーマのスタイルシートstyle.cssに、以下の様に書き足します。

/*******************************
* post-xx の指定固定ページ記事タイトル非表示
********************************/

#post-41 
.entry-title {
  display:none;
}

上記をそのままコピペでは駄目ですよ😓

#post-41 の「41」の部分は、
私のサイトでの固定ページのページ番号(因みにProfileページ)なので、
この41となっている部分に、貴方(貴女)が非表示にしたい、ページの番号を差し替えて下さい。

 念の為、固定ページの番号(ID)の調べ方です。

 1・「固定ページ一覧」で、番号が知りたいページのタイトルにマウスをおくと
  ブラウザーの下部に”POST=〇〇“と表示されます。
  その”POST=〇〇“の〇の部分が固定ページのページID(page-id)です。

これで、指定した固定ページだけ記事タイトルの表示が非表示になります。

 

ページごとにタイトルを非表示にする 方法

これは、複数のページで非表示にしたい場合に有効な方法です。
が、上記で書いたスタイルシートでも複数の指定が可能です。

複数ページの場合はカンマでページIDを区切れば良いです。(2020年11月10日追記) 
style.cssへの具体的な書き方はコメント欄に追記しています。

でも、イチイチ指定するのも結構面倒なので、もっと簡単に。を求めてみました。

スタイルシートも固定ページファイルも変更したくない場合や、
固定ページでも投稿ページでも記事タイトルを表示したくないものが出てきた時に
簡単に非表示にできる様になります。

しかし、これは別の記事にしたいと思います。

記事を書いたら、このページにリンク貼っときます~。

はい⇓こちらの記事です⇓

ページ毎にタイトルを非表示にする 方法 Hide Title の使い方
「固定ページのみ〇〇を非表示にする」というシリーズ記事の完結編。というよりおまけ記事です。Hide Titleをインストールすると、スタイルシートもページファイルも変更したくない場合、固定ページでも、投稿ページでも記事タイトルを表示したくないものが出てきた時にワンクリックで、簡単に非表示にできる様になります。テストページや、画像で魅せるレクチャーページ等を頻繁に設ける方には、特におすすめです。

追記と今度こそ本当の締め? もう消すものない??

それから、サイトのトップページを、固定ページに設定している場合の話。
(設定⇒表示設定で「フロントページの表示」の項目を
「固定ページ」にしている場合、以前少しの間そうしてみたら…Simplicityではちょっと変な感じになったので。)

そのトップページだけ、タイトルを表示したくない場合の記事も
書かなきゃ。とは思っているのですが、
レクチャーするには「フロントページの表示」を「固定ページ」に設定しなければならなくて。。。

その設定をすると、今当サイトで毎日コツコツ行っているトップページの改造?がややこしくなるので、
これも次回別件で。

嗚呼、宿題を自ら増やしてしまいました😎
こうした記事を書くのが楽しいのですが、サイト構築が疎かになり気味😂
早く映画の記事を書きたいのはヤマヤマなんですけど、この脱線を楽しんでいたりします😙

 

でっ、ほんとーにこれで、この「固定ページのみ〇〇を非表示にする方法シリーズ」は完結かも。

もう、これ以上固定ページで消したいものは、、、出ないと思います。

これ以上消すなら、、、、固定ページの記事を消す事ぐらいですね(苦笑;)

 

ご閲覧頂き、ありがとうございます。

お粗末でした。

 

 

コメント

  1. […] 固定ページでタイトルを非表示にする 方法  Simplicity | みてみた1 全ての固定ページの記事タイトルの表示を消す方法 1.1 その1 スタイルシートで非表示指定する1.2 その2 固定ページファイル(page.php)の変更で非表示にする 基本準備1.2.1 子テーマ内の固定ページファイル (page.php)編集2 指定した固定ページのみ、記事タイトルの表示を消す方法 2.1 スタ…mitemita.com スポンサーリンク (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); […]

  2. ochocco より:

    こんにちは!
    タイトル非表示の方法を探していて、こちらにたどり着きました。
    複数のページのIDをスタイルシートで指定したいのですが、指定したい
    ページが3つだけなので、なるべくプラグインを使わずCSSで解決したいのですが、
    良ければ複数指定する方法を教えていただけないでしょうか…?

  3. 長い間留守にしていてコメントを下さっていらしたお二人には本当に申し訳ないです。
    遅くなりましたが、以下の様に書けばCSSでの複数ページ指定となります。
    (もう既に用済だと思いつつ本文一行追記したものの、やはり申し訳なかったのでここに更に追記です。)

    /*******************************
    * post-41と42 の指定固定ページ記事タイトル非表示
    ********************************/

    #post-41 .entry-title,#post-42 .entry-title {
    display:none;
    }

タイトルとURLをコピーしました