カテゴリーページだけど WEB制作工房エル・タジェール
 

WordPressカテゴリー記事の一覧です

【備忘録】WordPressでデフォルトのPタグを削除するには?【コピペOK】

WordPress, スキルアップ

このポートフォリオ作成で、ググった内容をまとめていく備忘録シリーズ(勝手にシリーズ化)。
今回は、出力してみると、勝手についているpタグを消す方法です。

2行以上の改行はPタグで囲むのがWordPressのデフォルト

WordPressは仕様として、「2行位以上の改行はPタグで囲む」ことになっているみたいです。

指定されたテキストに含まれる 2 連続の改行を HTML のパラグラフへ置き換えます(<p>…</p>)。
WordPress はこの関数を投稿や固定ページの本文と抜粋のフィルターに使用します。(Codex日本語版

サイト全体でPタグを挿入しないようにするには、コレをfunctions.phpに書き込む

サイト全体の抜粋や記事でpタグを勝手に挿入しないようにするには、以下のコードをfunctions,phpに追記します。

remove_filter(‘the_excerpt’, ‘wpautop’);
remove_filter(‘the_content’, ‘wpautop’);

remove_filterの説明はこちら。第1引数に対象となるフィルターフック、第2引数にコールバック関数を入れます。(第3もあるけどオプションなので省略)

投稿ページだけ、pタグを挿入しないようにするには、コレをfunctions.phpに書き込む

投稿ページだけに適用するには、こちらを追記します。

add_filter(‘the_content’, ‘wpautop_filter’); //上述のremove_filterの逆ですね
function wpautop_filter($content) {
global $post;
$remove_filter = false;
$arr_types = array(‘post’); //適用させる投稿タイプを指定
$post_type = get_post_type( $post->ID );
if (in_array($post_type, $arr_types)) $remove_filter = true;
if ( $remove_filter ) {
remove_filter(‘the_content’, ‘wpautop’);
remove_filter(‘the_excerpt’, ‘wpautop’);
}
return $content;
}

固定ページだけ、pタグを挿入しないようにするには

固定ページの場合には、投稿ページのコードの5行目(太字の部分)を、以下のように代えて全体をfunctios.phpに書き込みます

$arr_types = array(‘page’);

カスタム投稿タイプのページだけ、pタグを挿入しないようにするには、コレをfunctions.phpに書き込む

デフォルトの投稿ページや固定ページはそのままに、カスタム投稿タイプのページだけpタグが入らないようにするには、こちらを書き込みます。

add_filter(‘the_content’, ‘wpautop_filter’);
function wpautop_filter($content) {
global $post;
$remove_filter = false;
$arr_types = array(‘カスタム投稿タイプを入力’);
$post_type = get_post_type( $post->ID );
if (in_array($post_type, $arr_types)) $remove_filter = true;
if ( $remove_filter ) {
remove_filter(‘the_content’, ‘wpautop’);
remove_filter(‘the_excerpt’, ‘wpautop’);
}
return $content;
}

以上です。

共有:

いいね:

[備忘録] WordPressオリジナルテーマの管理画面にサムネイル画像を登録しよう【簡単】

WordPress, スキルアップ

WordPressでテーマをカスタマイズしたり、自分でオリジナルテーマを作った時、管理画面の[外観]-[テーマ]に並ぶ自分のテーマにサムネイル画像を載せたいですよね。
今回はその掲載方法をまとめておきます。
簡単ですので、サクッとやってしまいましょう。

 
 

1.画像を用意する

まずは表示させる画像を用意しましょう。
大きさ   480px以上
縦横比   3:4
ファイル名 screenshot (jpg/jpeg/png/gifのいづれか1つ)
 

2.アップロードする

index.phpがある階層にアップロードします。
/wp-content/themes/あなたのオリジナルテーマ名/screenshot.png
のようになります。

 
以上です。
 
 
[管理画面]-[外観]-[テーマ]で、画像が掲載されたことを確認してください。

共有:

いいね:

[備忘録]WordPressテーマCocoonでサイドバーを増やす方法

WordPress, スキルアップ

WordPressのカスタマイズでCocoonを使う案件を担当しました。

当初、デフォルトのスキンを使っていました。左にメイン、右にサイドバーが一つあるものです。
これを、クライアントさまのご依頼で、メインの左右にサイドバーを付けることとなりました。
スキンからこのような仕様がありませんでしたので、cocoonのカスタマイズに取り掛かりました。

出来上がりはこんなかんじ。1と3がsidebar、2がメインです。

手順は以下のとおりです。

1.Cocoonの子テーマをダウンロードする
2.ファイルの場所を理解する
3.functions.phpに追記する
4.sidebar-left.php / sidebar-right.phpを新規に作る
5.index.phpを親テーマからコピペしてきて、トップページのレイアウトを書く
6.cssはstyle.cssに書き足す

 

 

1.カスタマイズは子テーマで

カスタマイズは子テーマでおこないます。
子テーマとは、親テーマのデザインや機能を引き継ぎながらもカスタマイズのできるテーマです。
子テーマを使う理由としては、
1.親テーマのアップデートで上書きされない
2.ソースコードが管理しやすい
などの理由があります。

今回はCocoonでしたので、こちらからダウンロードをしました。

https://wp-cocoon.com/downloads/

 

2.子テーマのファイルの整理のされ方を理解する

これについては、こちらのサイトが詳しかったです。

https://wp-cocoon.com/custum-template-files/

 

3.functions.phpに書き足す

書き足すコードはこちら

if ( function_exists(‘register_sidebar’) ) {
register_sidebar(array(
‘name’ => ‘サイドバー左’,  //管理画面のウィジッドに出る名前
‘id’ => ‘sidebar-1’,
‘description’ => ‘サイドバー1の説明を記入’,
‘class’ => ‘child-side1’, //ソースコードに付くクラス名
‘before_widget’ => ‘<div class=”widget”>’, //ウィジッド前に付くコード
‘after_widget’ => ‘</div>’, //ウィジッド後に付くコード
‘before_title’ => ‘<h2>’,  //タイトル文字の大きさ
‘after_title’ => ‘</h2>’,
));

register_sidebar(array(
‘name’ => ‘サイドバー2’,
‘id’ => ‘sidebar-2’,
‘description’ => ‘サイドバー2の説明を記入’,
‘class’ => ‘child-side2’,
‘before_widget’ => ‘<div class=”widget”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));
}

 

このサイドバーを出力させるためには、sidebar.phpに以下のコードを書き足します。

<?php if ( is_active_sidebar(‘sidebar-1’) ) : ?> //sidebar-1の場合
<?php dynamic_sidebar(‘sidebar-1’); ?>
<?php endif; ?>

4.sidebar-left.php / sidebar-right.phpを新規に作る

今回はサイドバーを2つ作りますので、
id:sidebar-1のsidebar-left.php
id:sidebar-2のsidebar-right.php
としました。
sidebar-2の場合には、上記のコードをsidebar-2とすればいいですね。

5.index.phpを親テーマからコピペしてきて、トップページのレイアウトを書く

index.phpは親テーマからコピペしました。
1にsidebar-left.php、3にsidebar-right.phpを置きます。
get_sidebarの書き方は、よいですよね。

<div class=”sidebar-one”>
<?php get_sidebar(‘left’); ?>
</div>

サイドバーの中に何を入れるかは、[管理画面]-[外観]-[ウィジッド]から足していくことができます。

6.cssはstyle.cssに書き足す

cssはstyle.cssを子テーマにあるものに入力して、親テーマの上書きをします。

 

 

以上です。
私もググりながらやったのですが、次回また悩むと思い、書き留めておきます。

【参考にさせていただきました】

WordPressでサイドバーを増やして複数のウィジェットをコントロールする

共有:

いいね:

[備忘録]カスタム投稿タイプのタームごとの一覧ページを作成する方法

WordPress, 雑談

このポートフォリオは、WordPressで作成しています。

投稿タイプは、メインクエリ(blog)とサブクエリ(works)からできています。
カスタム投稿タイプにあたるworksには、タクソノミーとしてカテゴリー(dep)、タームとしてwriting, banner, webpage, landingpageを使っています。

今回このタームごとのページを作成したのですが、検索しても理解が難しかったこともあり、まとめておきます。

まず必要となるphpです。

 

 

 

 

ここまでは、さまざまなページに記載がありますので理解しやすいと思います。問題のタームごとの一覧ページです。

 

きっとまた、私自身が迷うと思いますので、自分のためのメモです。

 

参考サイト

WordPressでカスタム投稿タイプの特定ターム(term)のみを単一または複数でループ表示したい場合の方法

 

functions.phpへカスタム投稿タイプを登録する方法はこちら

【WordPress】functions.phpからカスタム投稿タイプを登録する方法

 

 

共有:

いいね:

%d人のブロガーが「いいね」をつけました。