WordPress Cocoon 初心者 基本操作

WordPress Cocoonテーマの簡単な基本操作のメモ用記事です。
ブログを始めた時に基本的な操作もわからず、用語もわからずで記事作成が止まったり、
検索に時間がかかったりしたので、初心者の自分が習得していったものを残していこうと思います。

MacPC使用時の説明を書いています。
「return」(Mac)→「Enter」(Windows)
「command」(Mac)→「ctrl」(Windows)

改行

shift + return

returnのみでは次のブロックに移動してしまいます。

文字サイズ設定

Cocoon設定 → 全体 → サイトフォント → 文字サイズ

ブロック

用語「ブロック」「ブロックタイプ」「ブロックツール」「ブロックエディター」

  • ブロック
    見出し、段落(テキスト)、画像などを入力、挿入する選択場所の名前です。
    このテキストが書かれている所もブロック、上の囲みもブロック、
    その上の見出しもブロックです。
  • ブロックタイプ
    ブロックの種類。「見出し」「段落」「ボックス」「画像」「リスト」など
    ブロックの形式の総称です。
  • ブロックツール(ツールボックス)
    ブロックの内容を装飾する機能です。テキストの文字色を変えたり、マーカーを引いたり、
    リンクを付けたりします。
  • ブロックエディター
    現在デフォルトで利用されている入力方式の名称です。
    ツールやブロックの追加など必要な時に自身で選択し、表示させる方式に対して、
    以前は常時、多数のツールや追加ボタンなどが画面上部に表示されている方式でした。
    以前の方式は「ビジュアルエディター」「クラシックエディター」などと呼ばれています。

「HTML アンカー」「リンク」

「HTML アンカー」・リンクテキストでジャンプしてくる指定場所ブロックです。

  • 設定方法
    ブロック選択 → 右側設定「ブロック」 → 高度な設定 → HTML アンカー
    ジャンプ場所のネームを自分で設定する「例:jump-here」

「リンク」・クリックすると指定した場所にジャンプする特殊テキストです。

  • 設定方法
    テキスト選択(1文字単位で選択可)
    ブロックツールの「リンク」ボタン、または「command + K」
    「検索またはURLを入力」部分に「#」+「HTML アンカーで設定したネーム」
    または「WebページURL」
  • 入力例
    上記のようにHTML アンカーを「jump-here」と設定した時
    • 同じページ内でジャンプする場合「#jump-here」
    • 違うページにジャンプする場合「https://〜〜」
    • 違うページのアンカー設定した場所にジャンプする場合
      「https://〜〜/#jump-here」

タイトル上に階層

Cocoon設定 → 投稿 → パンくずリスト設定 → パンくずリストの配置

多くのブログ記事のタイトル上に「ホーム > AAAA > BBBB」のような
階層が表示されているのを見受けられるのですが、デフォルトでは記事の一番下に
設定されているので、一番上に設定したり、非表示にする方法です。

目次を最初は閉じた状態にする

Cocoon設定 → 目次 → 目次切り替え → 最初から目次内容を表示する「チェック外す」

見出しの文字編集(マーカーや大きさ、色)が反映されない

Cocoon設定 → 目次 → H見出し内のタグを有効にする「チェック」

見出しの中の文言で強調したいところなどをマーカーで色付けしたり、
大きさを変えたり、文字色を変えたりした時に、投稿編集画面では編集されているが、
実際の投稿記事に反映されていない時の設定方法です。

SNSシェア

Cocoon設定 → SNSシェア → トップシェアボタンの表示
→ メインカラムトップシェアボタンを表示「チェック」はずす

投稿記事の上下にSNSシェアボタン(Twitter、Facebookなど)があり、
不必要だと感じたので上のボタンを削除したときの方法です。

投稿記事一覧のPV数非表示

Cocoon設定 → 管理者画面 → 管理者パネル → PVの表示
→ インデックスにPV数を表示「チェック」はずす

投稿記事一覧の各記事(インデックス)に表示されているPV数(閲覧回数)を
非表示にする方法です。

記事幅(メインカラム)、サイドバー幅

Cocoon設定 → カラム

記事の横幅、サイドバーの横幅、記事とサイドバーの間隔を調整する時の方法です。

  • 記事(メインカラム)の幅
    Cocoon設定 → カラム → メインカラム設定 → コンテンツ幅(デフォルトは「800」)
  • サイドバーの幅
    Cocoon設定 → カラム → サイドバー設定 → サイドバー幅(デフォルトは「336」)
  • 間隔
    Cocoon設定 → カラム → カラム間余白設定 → カラム間の幅(デフォルトは「20」)

検索ボックス 文言変更

外観 → テーマファイルエディター → Cocoon → テーマファイル「検索フォーム」

placeholder=”<?php _e( ‘サイト内を検索’, THEME_NAME ) ?>”

「サイト内を検索」部分を変更、ファイルを更新。

サイドバーに取り付けられる検索ボックス(検索フォーム)に利用前に表示されている
「サイト内を検索」の文言を変更する方法です。

設定ではなく簡単なプログラムが必要になります。

例えば「サイト内を検索」 → 「Search」に変更したい場合

placeholder=”<?php _e( ‘サイト内を検索’, THEME_NAME ) ?>”

placeholder=”<?php _e( ‘Search’, THEME_NAME ) ?>”

このようにプログラムを変更し、画面下の「ファイルを更新」を押します。

投稿日、更新日の表示・非表示

Cocoon設定 → 本文 → 投稿情報表示設定 → 投稿関連情報
→ 投稿日の表示・更新日の表示「チェック」

サイト全体 背景色

Cocoon設定 → 全体 → 全体設定 → サイト背景色

ツールバー(アドミンバー、管理バー) 非表示

ユーザー → プロフィール → ツールバーのチェックはずす
→ 画面下の「プロフィールを更新」ボタン

プレビューやログイン時に自分のサイトを開いた時などに表示される
サイト上部の黒いツールバー(アドミンバーや管理バーと呼んだりもします)を
表示・非表示設定をします。

管理者パネル 非表示

Cocoon設定 → 管理者画面 → 管理者パネル → 管理者パネルの表示「表示しない」選択

プレビューやログイン時に自分のサイトを開いた時などに表示される
サイト下部の黒い半透明の管理者パネルを表示・非表示設定をします。

今後も役に立ちそうな情報がありましたら追記していこうと思います。

コメント

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