'ID' 특성 대신 'Class'를 사용하도록 WordPress Jetpack 플러그인 수정

'ID' 특성 대신 'Class'를 사용하도록 WordPress Jetpack 플러그인 수정

내가 달성하려는 것: 동일한 페이지의 여러 열에 대해 매끄러운 동시 무한 스크롤을 활성화합니다. 각 열은 최신 게시물을 표시하고 다른 열은 특정 태그의 최신 게시물을 표시합니다.

각각의 열은 서로 다른 루프를 사용하기 때문에 서로를 방해하지 않습니다. 그리고 이것이 제가 사용한 코드입니다. (단, 제가 어떻게 하고 있는지에 대한 아이디어를 제공하기 위한 것입니다.)

파일: index.php (pastebin에도 코드가 있음)

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package Twenty Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); ?>

        <div id="primary" class="content-area">
            <section id="content" class="site-content" role="main">
                <?php if ( have_posts() ) : ?>
                    <?php //twentytwelve_content_nav( 'nav-above' ); ?>
                    <?php /* Start the Loop */ ?>
                    <?php while ( have_posts() ) : the_post(); ?>
                        <article id="post-<?php the_ID(); ?>" <?php post_class('clearfix content-articles'); ?>>
                            <a class="archives-thumb-link" href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_post_thumbnail( 'archives-thumb' ); ?></a>

                            <div class="entry-text-wrapper">
                                <header class="entry-header">
                                    <h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
                                </header><!-- .entry-header -->
                            </div>
                        </article><!-- #post-<?php the_ID(); ?> -->
                    <?php endwhile; ?>
                    <?php twentytwelve_content_nav( 'nav-below' ); ?>
                <?php else : ?>
                    <?php get_template_part( 'no-results', 'index' ); ?>
                <?php endif; ?>
            </section><!-- #content .site-content -->

            <section id="highlights-container" class="site-content">
                <?php $latest_highlights = new WP_Query('tag=highlights&showposts=20&paged=' . $paged); ?>
                <?php if ( $latest_highlights->have_posts() ) : ?>
                    <?php while ($latest_highlights->have_posts()) : $latest_highlights->the_post(); $the_highlights_counter++; ?>
                        <article id="highlights-<?php echo $the_highlights_counter; ?>" class="highlights-wrapper">
                            <a class="highlights-link" href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark">
                                <?php the_post_thumbnail( 'highlights-thumb' ); ?>
                                <h1 class="highlights-title"><?php the_title(); ?> <span>/ <?php echo the_time('M. n'); ?></span></h1>
                            </a>
                        </article>
                    <?php endwhile; ?>
                <?php else : ?>
                    <?php get_template_part( 'no-results', 'index' ); ?>
                <?php endif; ?>
            </section><!-- #content .site-content -->
        </div><!-- #primary .content-area -->

<?php get_footer(); ?>

계획하는 방법:제트팩의 '무한 스크롤' 모듈은 두 개의 파일, 즉 무한대만을 구성합니다.php와 infinity.js, 그래서 자바스크립트와 php를 아는 사람이라면 조사하기가 좀 더 쉬울 것입니다.

여기에 명시된 바와 같이, 무한 스크롤을 활성화하려면 먼저 "무한 스크롤이 추가 게시물을 추가해야 하는 HTML 요소의 ID"를 제공해야 합니다.그리고 여러 개의 ID를 허용하지 않기 때문에 같은 페이지의 여러 열에 동시에 무한 스크롤을 가능하게 할 수는 없습니다.

아이디어: 그래서, 제가 수정해서 그가 원하는 것을 받아들일 수 있다면요.class대신에id속성, 여러 열에서 무한 스크롤을 통해 작업할 수 있습니다.

문제는 어떻게 하느냐 입니다.

---

최선을 다해 문제를 해결하는 동안(제가 해결하지 못했던), 여기에 제가 발견한 몇 가지 중요한 부분들이 있습니다. 저는 여러분이 쉽게 도울 수 있을 것이라고 생각합니다.

인[infinity.php][5]

• 'container' => 'content'라고 합니다content는 컨테이너 요소의 기본 ID입니다.

• 'id' => self::get_settings()->container,정의합니다.id자바스크립트에서 호출할 수 있습니다.

인[infinity.js][6]

• var id = $( this ).attr( 'id' ),확실히 해두도록 합니다.id속성을 지정하고 not aclass.

저는 JS와 PHP를 잘 모르기 때문에 다른 중요한 부분을 많이 놓쳤을 수도 있습니다.이 정보가 도움이 될 거라고 생각했어요.

제가 잘 모르면 알려주세요.

참고: 테스트/개발 WordPress 사이트를 어딘가에서 실행하고 있으며 도움이 필요한 경우 Slim Jetpack 플러그인(WordPress.com 에 연결할 필요가 없는 Jetpack 플러그인 버전)을 설치하고 'Jetpack' 메뉴에서 'Infinite Scroll' 모듈을 활성화하십시오.자세한 설명은 여기에서 확인할 수 있습니다.

Jetpack은 루프에 대한 부분 템플릿(예: content.php)을 실행하고, AJAX에서 HTML 출력을 검색한 다음, 현재 페이지에 "라이브"를 추가합니다.원래 템플릿(index.php)을 사용하지 않으므로 두 개의 다른 루프를 작성해도 상관 없습니다.

Jetpack의 스크롤 탐지 및 AJAX 요청을 빌리고 나머지를 조정하면 자신만의 솔루션을 작성할 수 있습니다.

서버에서 두 개의 서로 다른 포트에서 요청을 수신할 수 있습니까?보기에 따라 각 개체에서 원하지 않는 개체를 필터링할 수 있습니까?

스크롤 이벤트를 서로 다른 ID를 사용하여 4개의 Ajax 호출에 바인딩하는 것은 어떻습니까?

그 외에 다른 사람이 여기에서 설명하는 플러그인을 다시 작성해 볼 수 있습니다.

언급URL : https://stackoverflow.com/questions/14913905/modify-wordpress-jetpack-plugin-to-use-class-instead-of-an-id-attribute