table
0
pages.php
1add_action('admin_menu', function () {
2 add_submenu_page(
3 'edit.php?post_type=page',
4 'Ver Tabla',
5 'Ver Tabla',
6 'manage_options',
7 'ver-tabla-pages',
8 'render_ver_tabla_pages'
9 );
10});
11
12function render_ver_tabla_pages() {
13
14 $orderby = isset($_GET['orderby']) ? sanitize_text_field($_GET['orderby']) : 'title';
15 $order = isset($_GET['order']) ? sanitize_text_field($_GET['order']) : 'ASC';
16
17 function toggle_order($current_order) {
18 return $current_order === 'ASC' ? 'DESC' : 'ASC';
19 }
20
21 function sort_link($label, $column, $current_orderby, $current_order) {
22 $new_order = ($current_orderby === $column) ? toggle_order($current_order) : 'ASC';
23 $arrow = '';
24
25 if ($current_orderby === $column) {
26 $arrow = $current_order === 'ASC' ? ' ↑' : ' ↓';
27 }
28
29 $url = add_query_arg([
30 'orderby' => $column,
31 'order' => $new_order
32 ]);
33
34 return "<a href='{$url}'>{$label}{$arrow}</a>";
35 }
36
37 // Get all pages
38 $pages = get_posts([
39 'post_type' => 'page',
40 'posts_per_page' => -1,
41 'orderby' => $orderby,
42 'order' => $order
43 ]);
44
45 // Build tree (only useful if sorting by title)
46 $tree = [];
47 $lookup = [];
48
49 foreach ($pages as $page) {
50 $page->children = [];
51 $lookup[$page->ID] = $page;
52 }
53
54 foreach ($pages as $page) {
55 if ($page->post_parent && isset($lookup[$page->post_parent]) && $orderby === 'title') {
56 $lookup[$page->post_parent]->children[] = $page;
57 } else {
58 $tree[] = $page;
59 }
60 }
61
62 // Recursive renderer
63 function render_row($page, $level = 0) {
64
65 $has_children = !empty($page->children);
66 $indent = str_repeat('— ', $level);
67
68 $title = esc_html($page->post_title);
69 $url = get_permalink($page->ID);
70 $date_published = get_the_date('Y/m/d', $page->ID);
71 $date_modified = get_the_modified_date('Y/m/d', $page->ID);
72 $edit_link = get_edit_post_link($page->ID);
73
74 $row_id = 'page-' . $page->ID;
75 $parent_class = $page->post_parent ? 'child-of-' . $page->post_parent : '';
76
77 echo "<tr class='{$parent_class}' data-parent='{$page->post_parent}' style='" . ($level > 0 ? "display:none;" : "") . "'>";
78
79 echo "<td>";
80
81 if ($has_children) {
82 echo "<span class='toggle' data-id='{$page->ID}' style='cursor:pointer;'>▶</span> ";
83 } else {
84 echo "<span style='display:inline-block;width:14px;'></span>";
85 }
86
87 echo "{$indent}{$title}</td>";
88
89 echo "<td><a href='{$url}' target='_blank'>{$url}</a></td>";
90 echo "<td>{$date_published}</td>";
91 echo "<td>{$date_modified}</td>";
92 echo "<td>
93 <a href='{$url}' target='_blank'>Ver</a> |
94 <a href='{$edit_link}'>Editar</a>
95 </td>";
96
97 echo "</tr>";
98
99 // Render children
100 foreach ($page->children as $child) {
101 render_row($child, $level + 1);
102 }
103 }
104
105 ?>
106 <div class="wrap">
107 <h1>Tabla de Páginas</h1>
108
109 <table class="widefat fixed striped">
110 <thead>
111 <tr>
112 <th><?php echo sort_link('Título', 'title', $orderby, $order); ?></th>
113 <th>URL</th>
114 <th><?php echo sort_link('Fecha Publicación', 'date', $orderby, $order); ?></th>
115 <th><?php echo sort_link('Fecha Modificación', 'modified', $orderby, $order); ?></th>
116 <th>Acciones</th>
117 </tr>
118 </thead>
119 <tbody>
120 <?php
121 if ($pages) {
122
123 // If sorting by title → hierarchical
124 if ($orderby === 'title') {
125 foreach ($tree as $page) {
126 render_row($page);
127 }
128 } else {
129 // Flat list if sorting by date/modified
130 foreach ($pages as $page) {
131 $page->children = [];
132 render_row($page);
133 }
134 }
135
136 } else {
137 echo "<tr><td colspan='5'>No hay páginas.</td></tr>";
138 }
139 ?>
140 </tbody>
141 </table>
142 </div>
143
144 <script>
145 document.addEventListener('DOMContentLoaded', function () {
146
147 document.querySelectorAll('.toggle').forEach(function (toggle) {
148 toggle.addEventListener('click', function () {
149
150 const id = this.dataset.id;
151 const isOpen = this.textContent === '▼';
152
153 this.textContent = isOpen ? '▶' : '▼';
154
155 toggleChildren(id, !isOpen);
156 });
157 });
158
159 function toggleChildren(parentId, show) {
160 const children = document.querySelectorAll(`tr[data-parent='${parentId}']`);
161
162 children.forEach(function (row) {
163 row.style.display = show ? '' : 'none';
164
165 const toggle = row.querySelector('.toggle');
166 if (toggle) {
167 toggle.textContent = '▶';
168 }
169
170 // Recursively hide children
171 if (!show) {
172 toggleChildren(row.querySelector('.toggle')?.dataset.id, false);
173 }
174 });
175 }
176 });
177 </script>
178 <?php
179}