11 GeneratePressの便利なコード

投稿に公開日時の横に更新日時を表示する
- 下線付きリンクのアニメーション
アーカイブウィジェットの年数だけ表示する。
プラグインを使用しないシンプルな読み取り式プログレスバー
特定のページだけロゴを変更する
モバイル版でsibebarを非表示にする
左右のループにフィーチャー画像を表示
続きを読む」ボタンのカスタマイズ
エントリーのページングスタイル
ブラウザボックスを中央に配置
カテゴリーとタグの文字サイズ

ここでは、便利なコード・スニペットをご紹介します。これらは、私が使っている、あるいはある時点で必要となったテンプレート用の関数、フィルタ、CSSです ジェネレートプレス私が使っているものや おすすめ.中には、あなたの中から出てきた サポートフォーラムという、無尽蔵のソリューションの源泉である。 ドキュメンテーションなどを、サポートの問い合わせや検索から。投稿に公開日時の横に更新日時を表示する

GeneratePressのエントリーに更新日時を表示するフィルターです。設定/一般/日付形式/カスタムでどのように日付を設定したかによります。ここで使われているケースでは、次のようになります。d/m/Y : H:i

add_filter( 'generate_post_date_output', function( $output, $time_string ) {
    $time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';

    if ( get_the_date() !== get_the_modified_date() ) {
        $time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">Publicado: %2$s</time> | <time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">Actualizado: %4$s | </time>';
    }

    $time_string = sprintf( $time_string,
        esc_attr( get_the_date( 'c' ) ),
        esc_html( get_the_date() ),
        esc_attr( get_the_modified_date( 'c' ) ),
        esc_html( get_the_modified_date() )
    );

    return sprintf( '<span class="posted-on">%s</span> ',
        $time_string
    );
}, 10, 2 );

下線付きリンクのアニメーションCSSを使用すると、下のGIFのようにテキストリンクにアニメーションの効果をつけることができます。

/* Subrayado de enlace animado con color de fondo */
p a{
  font-weight: bold;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fdede7), to(#fdede7));
  background-image: linear-gradient(to bottom, #fdede7 0%, #fdede7 100%);
  background-repeat: no-repeat;
  background-size: 100% 00%;
  background-position: 0 111%;
  -webkit-transition: background-size .25s ease-in;
  transition: background-size .25s ease-in;
  padding-left: 2px;
  padding-right: 2px;
  border-bottom: 2px solid #ec4911;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

p a:hover{
  background-size: 100% 100%;
}

background-imageとborder-bottomで、色を変更することができます。段落やボタンなど、リンクを含む要素での挙動を観察して、何も違和感がないように調整する必要があります。コードは Kyle Van Deusen と同時に The Admin Bar, という面白いブログがあります。 Generatetweaks このサイトでは、GeneratePressとGenerateBloksのためのコードとテンプレートについて、いくつかの不思議な部分を公開しています。ダークモード GPとGBの場合。アーカイブウィジェットの年数だけ表示する。この関数は、アーカイブウィジェットのドロップダウンに、月ではなく年だけを表示するようにします。WordPressのネイティブウィジェットで動作するため、どのようなテンプレートでも動作します。あなたのブログが非常に古く、月のドロップダウンがすでに長すぎる場合に便利です。この例では、公開された投稿の数で表示されています。

function my_limit_archives( $args ) {
    $args['type'] = 'yearly';
    return $args;
}

add_filter( 'widget_archives_args', 'my_limit_archives' );
add_filter( 'widget_archives_dropdown_args', 'my_limit_archives' );

プラグインを使用しないシンプルな読み取り式プログレスバーWordPressでリーディングプログレスバーを追加するプラグインはいくつかありますし、Elementorのアドオンもありますが、ちょっとしたコードとGeneratePressのElementsのフィルターで、簡単にもっと軽量にすることが可能です。このコードは ソムナス・サフ.

*この例では、GeneratePressプレミアム バージョンを使用する必要が あります。まず エレメント付きフィルターこのコードで

<div class="progress-container">
    <div class="progress-bar" id="myProgressBar"></div>
</div>

<script>
window.onscroll = function() {myFunction()};
function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myProgressBar").style.width = scrolled + "%";
}
</script>

wp_headの位置で設定し、Posts / All Posts に表示させるようにしています。

11 GeneratePressの便利なコード 1 — 表示するには、以下のCSSを **子テーマ**または「カスタマイズ/追加CSS」にて、ご自身のブログに合ったスタイルを設定してください。

/* Barra de progreso de lectura */
.progress-container {
  width: 100%;
  height: 8px;  /* Ancho del contenedor de la barra de progreso */
  background: #ccc;  /* Color del contenedor sobre el que se mueve la barra de progreso */
}

.progress-bar {
  height: 8px; /* Ancho de la barra de progreso */
  background: #a70404; /* Color de la barra de progreso */
  width: 0%;
  position:fixed;
  z-index:999;
}

そして、このコードの色を緑に変更した後の表示がこれです。プログレスバーは上部に表示され、読書中に表示され、スクロールダウンすると増加し、スクロールアップすると減少します。

特定のページだけロゴを変更するのページで、一度必要になり、その時に見つけたのです。 David Lanau.このフィルタは指定したページだけ別のロゴを表示するもので、私は特定のテーマのコンテンツをまとめたカテゴリーページに別のロゴを表示させるのに使いました。

add_filter( 'generate_logo','tu_custom_about_logo' );
function tu_custom_about_logo( $logo )
{
 	// Si por ejemplo estamos en la página servicios, vamos a poner nuestro logo personalizado para esta página
 	if ( is_page( 'servicios' ) )
 	 	return 'URL of YOUR LOGO HERE';

 	// IF NOT= LOGO GENERAL
 	return $logo;

 }

モバイル版でsibebarを非表示にするまだサイドバーを使っている方で、処分している方は AMPページGeneratePressのネイティブモバイル版でサイドバーを使用している場合、このCSSでモバイル版のみサイドバーを非表示にすることができます。この場合、子テーマのスタイルシートに追加するか、カスタム/追加CSSから追加してください。右サイドバーを隠す

@media(max-width: 768px) {
    #right-sidebar {
        display: none;
    }
}

左サイドバーを隠す

@media(max-width: 768px) {
    #left-sidebar {
        display: none;
    }
}

両方を隠す

@media(max-width: 768px) {
    #right-sidebar, #left-sidebar {
        display: none;
    }
}

左右のループにフィーチャー画像を表示を使用する場合 テンプレート Marketerなどの伝統的なGeneratePressは、このコードを使用すると、ループ内の左または右に交互にフィーチャー画像を表示することができます。

.post-image-aligned-left .type-post:nth-child(even) .inside-article .post-image {
    margin-left: 2em;
    float: right;
    text-align: right;
}

でこんなコードを見つけました。 aquigeneratepress.comでは、その他の便利な技を紹介しています。そして、その結果がこれです。

続きを読む」ボタンのカスタマイズ上記と同様に、「続きを読む」ボタン用のCSSです。これは私がここで使っているもので、トップページの抜粋の下の右側に配置されるものです。

a.read-more {
display: inline-block;
color: white !important;
padding: 10px;
border-radius: 10px;
float:right
}

エントリーのページングスタイルフィルタとちょっとしたCSSで、トップページの投稿のページネーションにこのような外観を持たせることができます。ここからは、思いのままに微調整してください。

まず、子テーマのfunctions.phpやCode Snippetで追加できるこのフィルターを使って、PreviousとNextという単語を<<と >>という記号に置き換える必要があります。

add_filter( 'generate_next_link_text', function() {
    return '>>';
} );
add_filter( 'generate_previous_link_text', function() {
    return '<<';
} );

そして、これまでの事例と同じように追加されたCSSは


#nav-below {
    text-align: center;

.paging-navigation .nav-links>* {
	  font-size: 20px;
    padding: 7px 10px;
    background-color: #b50707;
    color: white;
    border-radius: 4px;
}
.paging-navigation .nav-links span.page-numbers.current {
    background: red;
    color: #ffffff;
}
a.next.page-numbers > span {
    display: none;
}

ブラウザボックスを中央に配置GeneratePressのネイティブの検索ボックスはちょっとダサいので、ここにCSSでデバイスに適応させ、中央に表示させる。

/* Centrar caja de búsqueda en menú principal */
form.search-form.navigation-search.nav-search-active {
    width:50%;
    left:50%;
    transform:translateX(-50%)
}

 /* Responsive caja de búsqueda en móvil - tablet y PC */
@media (max-width: 768px) {
    /* CSS para móvil */
        form.search-form.navigation-search.nav-search-active {
        width:100%;
        left:50%;
        transform:translateX(-50%)
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS para tablet */
    form.search-form.navigation-search.nav-search-active {
    width:100%;
    left:50%;
    transform:translateX(-50%)
    }

    .inside-navigation {
        align-items: flex-end !important;
        flex-direction:column-reverse;
    }
}
@media (min-width: 1025px) {
    /* CSS para PC */
        form.search-form.navigation-search.nav-search-active {
        width:40%;
        left:50%;
        transform:translateX(-50%)
    }
}

    .inside-navigation {
        align-items: flex-end !important;
        flex-direction:column-reverseです。
    }
}
メディア (min-width: 1025px) {.
    /* PC用CSS */
        form.search-form.navigation-search.nav-search-active {。
        幅：40％。
        左：50％。
        transform:translateX(-50%)
    }
}

カテゴリーとタグの文字サイズ投稿の下にカテゴリーやタグを表示する場合、このCSSを追加することで、サイズを変更したり、CSSをどんどん追加して好きなようにスタイルを変更することができます。修正するためのクラスはすべてドキュメントやCSS自体に記載されていますが、ややこしいのは嫌だという方はこちらをどうぞ。

.entry-meta .cat-links a {
    padding: 3px 5px;
    font-size: 20px;
}
.entry-meta .tags-links a {
    padding: 3px 1px;
	  font-size: 20px;

}

あなたは寛大ですか？

関連記事

GenerateBlocks Pro 2.3.0の新機能：モーダル、ポップアップ、ツールチップなど

更新された： 10/09/2025 : 13:25

プラグインなしでGutenbergコードブロックにコピーボタンとダウンロードボタンを追加する

更新された： 27/07/2025 : 01:53

プラグインなしでWordPressにツールチップを追加する

更新された： 25/07/2025 : 13:50

11 GeneratePressの便利なコード

ランダムトリップ

アーカイブ: 15331 ブログ記事

LucusHost、最高のホスティング

おすすめ

気前が良い？

グラフィック・ユーモアの問題

数百件