wordpress | 背景

cocoonで固定ページの一覧をいい感じに表示するやつ

フローラ — Fri, 27 Sep 2024 15:41:12 +0000

cocoonで固定ページの一覧をいい感じに表示するやつを作ったので乗せます。実際の表示はこの記事の一番下に乗せました。

　cocoonで動作する想定ですが、cocoon-childのstyle.cssを多少いじっているため、別の環境ではうまく動作しない可能性があります。まあ参考程度って感じです。

やり方

　wp-content/themes/cocoon-child-masterにあるfunctions.phpに以下を追記。
　このとき、デフォルトのアイキャッチ画像のURLは適当に変更してください。

function my_koteipage_list() {
	global $post;
	$args = array(
		'post_type' => 'page', // 固定ページを指定
		'posts_per_page' => -1,
        'orderby' => 'modified', // 最終更新日でソート
        'order' => 'DESC'
	);
	$posts_array = get_posts($args);
	foreach($posts_array as $post):
		setup_postdata($post);
		$post_date = get_the_date('Y.m.d.'); //記事の投稿日
        $modified_date = get_the_modified_date('Y.m.d.'); //記事の更新日
		$link = get_the_permalink(); //記事のリンク
		$title = get_the_title(); //記事のタイトル
        //記事のサムネイル画像のURL
        $image_url_320 = get_the_post_thumbnail_url($post->ID,array(320,180));
        $image_url_160 = get_the_post_thumbnail_url($post->ID,array(160,90));
        $image_url_120 = get_the_post_thumbnail_url($post->ID,array(120,68));
        if (!$image_url_320 || !$image_url_160 || !$image_url_120) {
            //アイキャッチ画像が設定されていない場合は、デフォルトのアイキャッチのURLを使用する。
            $image_url_320 = "https://moonpeta.com/wp-content/uploads/2020/04/20170202171141-320x180.png";
            $image_url_160 = "https://moonpeta.com/wp-content/uploads/2020/04/20170202171141-160x90.png";
            $image_url_120 = "https://moonpeta.com/wp-content/uploads/2020/04/20170202171141-120x68.png";
        }
        $category = get_the_category();
        if (!empty($category)) {
            $category_name = $category[0]->name; // 最初のカテゴリー名を取得
        } else {
            $category_name = '未分類'; // カテゴリーが割り当てられていない場合の表示
        }

        $digest = get_the_excerpt(); //記事のダイジェスト

        if(is_user_administrator() && is_admin_panel_visible() && !is_amp() && !isset($_GET['demo']) && (is_admin_panel_singular_page_visible() || is_admin_panel_not_singular_page_visible())){
            //ログイン中だけpvを表示するようにする。
            //以下pv取得関数はcocoon独自のものなので注意。
            $todays_pv = get_todays_pv();
            $last_7days = get_last_7days_pv();
            $last_30days_pv = get_last_30days_pv();
            $all_pv = get_all_pv();
            $html_pv = '
                            
                            
                                本日:
                                '.$todays_pv.'
                            
                            
                                週:
                                '.$last_7days.'
                            
                            
                                月:
                                '.$last_30days_pv.'
                            
                            
                                全体:
                                '.$all_pv.'
                            
                        ';
        } else {
            $html_pv = '';
        }

        $html .= '
                    
                        
                            
                                ' . $category_name . '
                        

                        
                            
                                ' . $title . '
                            
                            
                                ' . $digest . '
                            
                            ' . $html_pv . '
                            
                                
                                    
                                        
                                        '. $post_date .'
                                    
                                    
                                        
                                        '. $modified_date .'
                                    
                                
                                
                                    ' . $category_name . '
                                
                                    
                        

                    
                ';
	endforeach;
	wp_reset_postdata();
	return $html;
}
add_shortcode('my_koteipage_list','my_koteipage_list');

　ページ内の固定ページ一覧を表示したい場所に以下を書く。

[my_koteipage_list]

実際の表示

ボードゲーム

ボードゲームまとめ

　プレイしたことがあるボードゲームを並べていきます。ほぼ自分用。　評価は10点満点で付けます。記事の詳細 10点満点で点数を付けます。基本は整数で付けますが、区別したいときに端数をつけます。また点数は基本的にゲームの面 […]

2024.09.27. 2026.03.09.

ボードゲーム

Jump_King

Jump King

　クリアしたら追加する。　Jump KingのDiscordサーバーに難易度表がある。それを目安に少しずつクリアしていきたい。FatalityとBloodmoonクリアまで頑張るぞ！　カスタムマップはsteamのwork […]

2025.04.24. 2026.02.17.

Jump_King

未分類

固定ページ一覧

2024.09.28. 2026.02.16.

未分類

twitterの共有ボタンが重いので自作する

フローラ — Sat, 14 May 2022 15:27:52 +0000

twitterのアカウント共有ボタン

Follow @PKST_puyo2

　が重いです。
　これはツイッターの公式ウィジェットですが、これは中身を見てみると

Follow @PKST_puyo2

　となっています。ただのボタンなのにいちいちスクリプトを読み込んでいるため遅く感じます。

　なので自作しました。

/********************/
/*twitterのボタン*/
/********************/
.twitter_btn{/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 12px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 20px;/*高さ*/
  width: 220px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 12px;/*文字のサイズ*/
  line-height: 20px;/*高さと合わせる*/
  background-color: #1D9BF0;
  text-decoration:none;/*下線は消す*/
}

.twitter_btn .fa-twitter {/*アイコン*/
  font-size: 12px;/*アイコンサイズ*/
  position: relative;
  right: 2px;
}

.twitter_btn span {
  position: relative;
}

.twitter_btn:hover{
  color: #FFF;
  background-color: #0C7ABF;
}

@PKST_puyo2さんをフォロー

できたボタンはこんな感じ。

@PKST_puyo2さんをフォロー

　並べると

Follow @PKST_puyo2

@PKST_puyo2さんをフォロー

　上が公式、下が自作です。そこそこ似ていると思います。

　シンプルですが結構有効でした。実際PageSpeedInsightsを見てみると、公式の共有ボタンでは出ていた『使用していないJavaScriptの削減』の項目が消えました。

公式のやつはこれが出ていたけど消えた。

　同じ状況の人は試してみるといいかもしれません。

　この記事だけだと説明不足感があるので、場合によっては以下も参考にしてください。

404 NOT FOUND | 背景

自分用HCBメモ

フローラ — Tue, 30 Mar 2021 03:41:15 +0000

　wordpress用プラグインのHighlighting Code Blockのメモです。
　コードをエレガントに表示するためにHighlighting Code Blockというプラグインを入れたんですが、なんかキモいです。
　デフォルトでpythonのコードを入れるとこんなです（いまは変えたので画像）。

　個人的ここ嫌だポイント

コメントがイタリックじゃない
classがイタリック
defがイタリック
self.nのnに色ついて欲しい
なぜかprintとrangeで色が違ったりしてる、というかrangeがイタリック
Yuri(i)と.testchan()に色がついてない
全体的に色がかぶったりしてる。

　生理的に無理なので直します。

　変更は以下のようにします。wordpressの管理画面のHCB設定のヘルプにあるURL先からprism.cssのファイルをダウンロードすることができるので、ダウンロードしていい感じに変更します。
　そのファイルをHCB設定画面の「独自カラーリングファイル」という項目で指定するだけです。
　ただし、デフォルトの設定ではprintがifとかと同じ色になっていて（なんで？）、函数のrangeとは違う色になっています。個人的にはprintは函数の色になってほしいです。
　これはprism.jsを書き換えることで対処できました。prism.jsを見てみるとprintはkeyword:の中に含まれているので、それを消してbuiltin:の方に追加しました。JavaScriptは少しも知識がないですが、感でいけました。
　prism.jsにどの文字列にどの名前が付けられているのかわかるので、それを見ながらprism.cssを書き換えればいい感じにできると思います。

　というわけで改良版。

#テスト用
#別に動かないです
class Yuri:
    def __init__(self,n):
        self.n=n

    def testchan(self):
        if self.n%2==0:
            print("I love evennumber")
        else:
            print("I hate oddnumber")

for i in range(10):
    yuri=Yuri(i)
    yuri.testchan()

range(10)
rrange(10)
boolkun=True
number=0
variable=x,y
null=None
ope=a+b-c*d/e//f
x=int(10)
X=[1,2,3,4]
Y=[5,6,7,8]
XY=[x*y for x,y in zip(X,Y)]
XY=list(map(lambda x,y:x*y,X,Y))

def func(x,y,z):
    return x+y-z

g=func(1,2,3)

　普段Atomで書いてるのとできるだけ近づける努力をしました。
　まあまだ気に入らない部分はあるんですが、個人的には及第点なので、よしとしておきます。