ここでは、便利なコード・スニペットをご紹介します。これらは、私が使っている、あるいはある時点で必要となったテンプレート用の関数、フィルタ、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 に表示させるようにしています。
/* 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;
}
