특정 사용자를 숨기기

개발
1

특정 사용자를 Users 목록에서 숨기는 간단한 JavaScript 코드를 공유해 보려 합니다. 플러그인을 통해 구현하면 훨씬 우아한 방법이 될 수 있겠지만, 아직은 그 정도 대담함이 부족합니다! 또한, 이 방법은 각 테마마다 별도로 적용해야 하며, 현재는 Light 테마에서만 작동하도록 하드코딩되어 있습니다! 원리는 모든 테마에 동일하게 적용됩니다.

james-admin과 another-admin이라는 이름의 사용자가 있고, 이들을 모든 사용자에게 공개적으로 표시하고 싶지 않다고 가정해 보겠습니다. 다음 커스텀 스크립트를 </body> 커스터마이징(Settings -> Customize -> Themes -> Light -> </body>)에 추가하기만 하면 됩니다:

<script type="text/javascript">
    
    // 숨길 사용자 목록
    let hidden_users = [ "james-admin", "another-admin" ];
    
    // 페이지가 AJAX를 통해 로드될 때
    $( document ).ajaxComplete( function( event, xhr, settings ) {
        
        // 사용자 목록 페이지인지 확인
        if ( settings.url.startsWith("/directory_items?") ) {
            
            // 숨길 사용자가 포함된 모든 컨테이너 찾기
            hidden_users.forEach(function ( hidden_user ) {
                $( "a:contains('" + hidden_user + "')" ).each( function() {
                    
                    // 재확인
                    if ( this.text === hidden_user ) {
                        
                        // 사용자 마스킹/숨김 (이 테마에 특화된 코드!)
                        $( this ).closest( "tr" ).remove();
                        
                    }
                    
                });
            });
            
        }
        
    });
    
</script>

댓글 환영합니다!

2

확인차 여쭤보는데, 여기가 관리자(Admins)와 모더레이터(Moderators)가 나열된 정보(About) 페이지인가요?

정말 멋집니다. 코딩을 더 배워야겠어요.

3

@Heliosurge, 좋은 지적입니다 - 이것은 사용자 목록(/u)에 관한 것이었지만, 이제 사이트 정보(/about)를 포함하도록 업데이트했습니다.

코드를 업데이트하여 마스킹할 페이지를 지정할 수 있도록 하고, 함께 제거해야 하는 부모 컨테이너가 있는지도 지정할 수 있도록 했습니다.

<script type="text/javascript">
    
    // pages to mask (page|parent)
    let mask_pages = ["/directory_items?|tr", "/about.json"];
    let mask_users = ["james-admin", "another-admin"];
    
    // when a page is loaded via AJAX
    $(document).ajaxComplete(function(event, xhr, settings) {
        
        // check if on the user list
        mask_pages.forEach(function(mask_page_full_spec) {
            
            // split spec
            let mask_page_spec = mask_page_full_spec.split("|");
            
            // find page
            if (settings.url.startsWith(mask_page_spec[0])) {
                mask_users.forEach(function(mask_user) {
                    
                    // get container
                    let mask_user_elem = $("[data-username='"+mask_user+"']");
                    
                    // parent container?
                    if (mask_page_spec.length == 2) {
                        mask_user_elem.closest(mask_page_spec[1]).remove();
                    } else {
                        mask_user_elem.remove();
                    }
                    
                });
            }
            
        });
        
    });
    
</script>
4

정말 훌륭한 작업입니다.

5

모바일 버전에서는 이 방식이 작동하지 않는다는 것을 깨달았습니다. 다음 내용을 수정하세요:

// <tr> 또는 <div>를 이 순서로 검색합니다
let mask_pages = ["/directory_items?|tr,div", "/about.json"];

// closest는 객체 자체를 포함할 수 있으므로, 부모 요소부터 검색합니다
mask_user_elem.parent().closest(mask_page_spec[1]).remove();

이 정보가 도움이 되길 바랍니다. 앞서 언급했듯이, '관리자’이면서 고객 포럼에 노출되고 싶어 하지 않는 사용자를 가리기 위해 플러그인을 사용하는 것이 훨씬 나은 방법일 것입니다.

6

이 JavaScript가 호환 가능한 테마 간에 공유할 수 있는 컴포넌트일 수도 있다는 점을 깨달았습니다. 이 사소한 기능에 대해 더 이상 지루하게 설명하지 않겠습니다 — 하지만 제게 큰 도움이 되었어요! :grinning: